@import url('./sections/hero.css');
@import url('./sections/content-2-images-links.css');

.content-2-images-links {
    padding-block: 10rem 0;
}

.gallery-section {
    --img-height: 362;

    padding-block: 6rem 3rem;

    /* Static grid — 5 or fewer images */
    .gallery-grid {
        display: flex;
        gap: 1rem;
    }

    .gallery-grid__item {
        flex: 1;
        min-width: 0;
        aspect-ratio: 286 / var(--img-height);
    }

    .gallery-grid__item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Swiper — more than 5 images */
    .gallery-swiper {
        width: 100%;
    }

    .gallery-swiper .swiper-slide {
        height: calc(var(--img-height) * 1px);
    }

    .gallery-swiper .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

.meet-the-designer {
    padding-block: 5rem 8rem;
    background-color: hsl(var(--gold) / 0.05);

    .wrapper {
        display: flex;
        gap: 5.5rem;
        padding-inline: 3rem;
    }

    .meet-the-designer__avatar {
        flex-shrink: 0;
        width: 160px;
        height: 160px;
        position: relative;

        .deco-img {
            max-width: 190px;
            position: absolute;
            top: -24px;
            left: -24px;
        }

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 100px;
        }
    }

    .meet-the-designer__content {
        flex: 1;
        min-width: 0;
        max-width: 900px;
        padding-block-start: 3rem;
    }
}

@media (max-width: 1023px) {
    .content-2-images-links {
        padding-block: 3.5rem;
    }

    .gallery-section {
        padding-block: 3.5rem;
    }

    .meet-the-designer {
        padding-block: 3.5rem;

        .wrapper {
            flex-direction: column;
            gap: 2.5rem;
            padding-inline: 1rem;
        }

        .meet-the-designer__avatar {
            width: 120px;
            height: 120px;

            .deco-img {
                top: -10px;
                left: -20px;
            }
        }

        .meet-the-designer__content {
            padding-block-start: 0;
        }
    }
}