.vs-grid-bg-section{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vs-grid-bg--container {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.vs-grid-bg--container {
    grid-template-columns: 1fr;
}

.vs-grid-bg--item__main{
    border-radius:32px;
    width: 100%;
    min-height: 128px !important;
}


.vs-grid-bg--item {
    --url_background_image_item_1: url("../assets/img/bg_item_1.png");
    --url_background_image_item_2: url("../assets/img/bg_item_2.jpg");
    --url_background_image_item_3: url("../assets/img/bg_item_3.jpg");
    --url_background_image_item_4: url("../assets/img/bg_item_4.jpg");
    --url_background_image_item_5: url("../assets/img/bg_item_4.jpg");
    --url_background_image_item_6: url("../assets/img/bg_item_4.jpg");
    min-height: 185px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 32px;
}

.vs-grid-bg--item.item1{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 39.77%, rgba(0, 0, 0, 0.60) 60%), var(--url_background_image_item_1) lightgray 50% / cover no-repeat;
}

.vs-grid-bg--item.no-text.item1{
    background-image: var(--url_background_image_item_1);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vs-grid-bg--item.item2{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 39.77%, rgba(0, 0, 0, 0.60) 60%), var(--url_background_image_item_2) lightgray 50% / cover no-repeat;
}

.vs-grid-bg--item.no-text.item2{
    background-image: var(--url_background_image_item_2);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vs-grid-bg--item.item3{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 39.77%, rgba(0, 0, 0, 0.60) 60%), var(--url_background_image_item_3) lightgray 50% / cover no-repeat;
}

.vs-grid-bg--item.no-text.item3{
    background-image: var(--url_background_image_item_3);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.vs-grid-bg--item.item4{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 39.77%, rgba(0, 0, 0, 0.60) 60%), var(--url_background_image_item_4) lightgray 50% / cover no-repeat;
}

.vs-grid-bg--item.no-text.item4{
    background-image: var(--url_background_image_item_4);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vs-grid-bg--item.item5{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 39.77%, rgba(0, 0, 0, 0.60) 60%), var(--url_background_image_item_4) lightgray 50% / cover no-repeat;
}

.vs-grid-bg--item.no-text.item5{
    background-image: var(--url_background_image_item_5);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vs-grid-bg--item.item6{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 39.77%, rgba(0, 0, 0, 0.60) 60%), var(--url_background_image_item_4) lightgray 50% / cover no-repeat;
}

.vs-grid-bg--item.no-text.item6{
    background-image: var(--url_background_image_item_6) !important;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.vs-grid-bg--item-body{
    padding: 0 20px 16px 20px;
    position: absolute;
    display: flex;
    max-width: 821px;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    flex: 1 0 0;
}

@media (min-width: 768px) {

    .vs-grid-bg--item__main{
        max-height: 100%;
    }
    .vs-grid-bg--item {
        height: 400px;
    }

    .vs-grid-bg--container {
        display: grid;
        gap: 32px;
        margin-top: 32px;
    }

    .vs-grid-bg--container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
          "first first first"
          "second third fourth";
    }

    .tpl-grid--2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
    "first second";
    }

    .tpl-grid--3 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
    "first first"
    "second third";
    }

    .tpl-grid--4 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
    "first first first"
    "second third fourth";
    }

    .tpl-grid--5 {
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas:
    "first first first second second second"
    "third third fourth fourth fifth fifth";
    }

    .tpl-grid--6 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
    "first second third"
    "fourth fifth sixth";
    }


    .item1 { grid-area: first; }
    .item2 { grid-area: second; }
    .item3 { grid-area: third; }
    .item4 { grid-area: fourth; }
    .item5 { grid-area: fifth; }
    .item6 { grid-area: sixth; }
}