#gallery {
    --mg: calc((100vw - 1280px) / 2);
    background-size: cover;
    background-repeat: no-repeat;
}

.gallery-header {
    width: 288px;
    height: 152px;
    background: #2C2E34;
}

.text-section-title{
    color: var(--gallery--color_swatch--heading_h2);
}

.gallery-pic {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-pic>div {
    width: 100%;
    background-image: var(--img);
    background-position: center;
    background-size: cover;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.gallery-pic:hover>.-hover {
    transform: scale(1.07);
}
/*-- Mobile Version --*/
@media (max-width: 1319px) {
    .gal-title{
        font-weight: 400;
        font-size: 38px !important;
        line-height: 40px;
    }
}
.gallery-container-wrap {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr var(--mg);
    grid-template-rows: auto 1fr;
    padding-bottom: 72px;
}

.gallery-container {
    grid-column: 2/5;
    grid-row: 2/3;
}

.gallery-items-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.gallery-mob-header {
    background: #2C2E34;
    color: white;
    padding: 8px 16px;
    display: inline-block;
}

.gallery-container-mob-wrap {
    padding: 0 2rem;
    padding-top: 32px;
    padding-bottom: 56px;
}
/*-- Mobile Version --*/
@media (max-width: 767px) {
    .gallery-container-mob-wrap {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.gallery-items-mob-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.gallery-mob-pic {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-mob-pic>div {
    width: 100%;
    background-image: var(--img);
    background-position: center;
    background-size: cover;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.gallery-mob-pic:hover>.-hover {
    transform: scale(1.07);
}