.bento_grid_inner {
    display: grid;
    height: var(--ce-height);
}

.bento_grid_item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.bento_grid_item {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.bento_grid_item_textblock {
    position: absolute;
    width: max-content;
    max-width: 100%;
    z-index: 1;
}
.bento_grid_item > a {
    display: block;
    height: 100%;
    width: 100%;
}
.top_left .bento_grid_item_textblock {
    left: 0;
    top: 0;
}

.top_right .bento_grid_item_textblock {
    right: 0;
    top: 0;
}

.bottom_left .bento_grid_item_textblock {
    left: 0;
    bottom: 0;
}

.bottom_right .bento_grid_item_textblock {
    right: 0;
    bottom: 0;
}

.centered .bento_grid_item_textblock {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 1;
}

.bento_grid_item_image {
    width: 100%;
    height: 100%;
}

.bento_grid_item_image img {
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: all 0.5s ease-in-out;
    display: block;
    object-fit: cover;
}

.zoom_on_hover .bento_grid_item:hover .bento_grid_item_image img,
.zoom_on_hover .bento_grid_item:focus-within .bento_grid_item_image img {
    transform: scale(1.1);
}

.text_on_hover .bento_grid_item_content_wrapper {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.4s;
}

.text_on_hover span.bento_grid_item_content_wrapper_inner {
    min-height: 0;
    visibility: hidden;
    transition: visibility 0.4s ease-in-out;
}

.text_on_hover .bento_grid_item:hover .bento_grid_item_content_wrapper,
.text_on_hover .bento_grid_item:focus-within .bento_grid_item_content_wrapper {
    grid-template-rows: 1fr;
}

.text_on_hover .bento_grid_item:hover span.bento_grid_item_content_wrapper_inner,
.text_on_hover .bento_grid_item:focus-within span.bento_grid_item_content_wrapper_inner {
    visibility: visible;
}

/* Columns and Rows Definitions */
.bento_grid.grid_1 .bento_grid_inner,
.bento_grid.grid_2 .bento_grid_inner {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.bento_grid.grid_3 .bento_grid_inner,
.bento_grid.grid_4 .bento_grid_inner {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.bento_grid.grid_5 .bento_grid_inner {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, 1fr);
}

.bento_grid.grid_6 .bento_grid_inner,
.bento_grid.grid_7 .bento_grid_inner {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.bento_grid.grid_8 .bento_grid_inner,
.bento_grid.grid_9 .bento_grid_inner {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.bento_grid.grid_10 .bento_grid_inner,
.bento_grid.grid_11 .bento_grid_inner {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.bento_grid.grid_12 .bento_grid_inner,
.bento_grid.grid_13 .bento_grid_inner {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

/* Grid Areas Definitions */
.bento_grid.grid_1 .bento_grid_inner {
    grid-template-areas:
        'block1 block2'
        'block1 block2'
        'block1 block3'
        'block1 block3';
}

.bento_grid.grid_2 .bento_grid_inner {
    grid-template-areas:
        'block1 block2'
        'block1 block2'
        'block3 block2'
        'block3 block2';
}

.bento_grid.grid_3 .bento_grid_inner {
    grid-template-areas:
        'block1 block2 block3'
        'block1 block2 block3'
        'block4 block2 block3'
        'block4 block2 block5'
        'block4 block2 block5';
}

.bento_grid.grid_4 .bento_grid_inner {
    grid-template-areas:
        'block1 block2 block3'
        'block1 block2 block3'
        'block4 block2 block3'
        'block4 block2 block6'
        'block4 block5 block6';
}

.bento_grid.grid_5 .bento_grid_inner {
    grid-template-areas:
        'block1 block1 block2'
        'block1 block1 block2'
        'block1 block1 block2'
        'block3 block3 block2'
        'block3 block3 block6'
        'block4 block5 block6'
        'block4 block5 block6';
}

.bento_grid.grid_6 .bento_grid_inner {
    grid-template-areas:
        'block1 block2 block2 block3 block3'
        'block4 block4 block5 block3 block3';
}

.bento_grid.grid_7 .bento_grid_inner {
    grid-template-areas:
        'block1 block1 block2 block2 block3'
        'block1 block1 block4 block5 block5';
}

.bento_grid.grid_8 .bento_grid_inner {
    grid-template-areas:
        'block1 block2 block2 block3 block3'
        'block4 block4 block5 block3 block3'
        'block6 block6 block6 block3 block3';
}

.bento_grid.grid_9 .bento_grid_inner {
    grid-template-areas:
        'block1 block1 block2 block2 block3'
        'block1 block1 block4 block5 block5'
        'block1 block1 block6 block6 block6';
}

.bento_grid.grid_10 .bento_grid_inner {
    grid-template-areas:
        'block1 block2'
        'block1 block2'
        'block1 block2'
        'block1 block3'
        'block1 block3';
}

.bento_grid.grid_11 .bento_grid_inner {
    grid-template-areas:
        'block1 block2'
        'block1 block2'
        'block1 block2'
        'block3 block2'
        'block3 block2';
}

.bento_grid.grid_12 .bento_grid_inner {
    grid-template-areas:
        'block1 block1 block1 block2 block2 block2'
        'block1 block1 block1 block2 block2 block2'
        'block1 block1 block1 block2 block2 block2'
        'block1 block1 block1 block3 block3 block4'
        'block1 block1 block1 block3 block3 block4';
}

.bento_grid.grid_13 .bento_grid_inner {
    grid-template-areas:
        'block1 block1 block1 block2 block2 block2'
        'block1 block1 block1 block2 block2 block2'
        'block1 block1 block1 block2 block2 block2'
        'block4 block3 block3 block2 block2 block2'
        'block4 block3 block3 block2 block2 block2';
}
/* Grid Areas Assignments */
.bento_grid_inner .bento_grid_item:nth-child(1) {
    grid-area: block1;
}

.bento_grid_inner .bento_grid_item:nth-child(2) {
    grid-area: block2;
}

.bento_grid_inner .bento_grid_item:nth-child(3) {
    grid-area: block3;
}

.bento_grid_inner .bento_grid_item:nth-child(4) {
    grid-area: block4;
}

.bento_grid_inner .bento_grid_item:nth-child(5) {
    grid-area: block5;
}

.bento_grid_inner .bento_grid_item:nth-child(6) {
    grid-area: block6;
}

.bento_grid_inner .bento_grid_item:nth-child(7) {
    grid-area: block7;
}

.bento_grid_inner .bento_grid_item:nth-child(8) {
    grid-area: block8;
}

.bento_grid_inner .bento_grid_item:nth-child(9) {
    grid-area: block9;
}

/* Responsiveness */

@media screen and (max-width: 768px) {
    .bento_grid_inner {
        display: flex;
        height: 100% !important;
        flex-direction: column;
    }

    .no_image .bento_grid_item_textblock {
        position: relative;
        width: 100%;
        transform: none;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        padding: 25px !important;
    }

    .bento_grid_item {
        display: block;
        max-height: var(--ce-height);
        height: 100%;
    }

    .bento_grid_item_image img {
        max-height: var(--ce-height);
        min-height: calc(var(--ce-height) / 2.5);
        height: 100%;
        object-fit: cover;
    }
}