.textGallery__wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--Margin-40);
}

.textGallery__top {
    position: relative;
    display: flex;
    align-items: start;
    gap: calc(var(--Gap-30));
}
.textGallery-thumbnail {
    position: relative;
    width: 24%;
    height: auto;
    aspect-ratio: 300 / 350;
    border-radius: 10px;
    overflow: hidden;

    & img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
}
.textGallery-title {
    position: relative;
    text-align: left;
    margin-bottom: 0px;
    /* width: 49.02%; */
    width: 30%;
}
.textGallery-text__wrapper {
    position: relative;
    width: 0%;
    flex-grow: 1;
}
.textGallery-btn {
    position: relative;
    margin-top: var(--Margin-30);
}


.textGallery-gallery__wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: var(--Gap-30);

    & .textGallery-gallery-item:nth-child(1),
    & .textGallery-gallery-item:nth-child(4) {
        aspect-ratio: 360 / 400;
    }

    & .textGallery-gallery-item:nth-child(2),
    & .textGallery-gallery-item:nth-child(3) {
        aspect-ratio: 360 / 470;
    }
}

.textGallery-gallery-item {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 5px;
    overflow: hidden;

    & img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
}

@media(max-width: 660px) {
    .textGallery-gallery__wrapper {
        grid-template-columns: repeat(2, 1fr);

        & .textGallery-gallery-item:nth-child(1),
        & .textGallery-gallery-item:nth-child(4),
        & .textGallery-gallery-item:nth-child(2),
        & .textGallery-gallery-item:nth-child(3) {
            aspect-ratio: 360 / 400;
        }
    }

    .textGallery__top {
        flex-direction: column;
        gap: var(--Margin-20);
    }
    .textGallery-title,
    .textGallery-text__wrapper {
        width: 100%;
    }
}



@media(max-width: 1000px) {
    .textGallery__top {
        flex-direction: column;

        & .textGallery-title {
            width: 100%;
        }
        & .textGallery-text__wrapper {
            width: 100%;
        }
        & .textGallery-thumbnail {
            margin-left: auto;
            margin-right: auto;

            width: 100%;
            max-width: 280px;
        }
    }
}