/* =========================================================
   ZOOM PHOTO STUDIO - HOME-DRESSES.CSS v1.1

   DESKTOP
   Image | Copy | Image

   MOBILE
   Copy
   Image | Image
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.home_dresses {
    background:
        var(--zoom-warm-white);
}


/* =========================================================
   DESKTOP GRID
========================================================= */

.home_dresses_grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.95fr)
        minmax(0, 1fr);

    align-items:
        stretch;

    width:
        100%;
}


/* =========================================================
   COPY
========================================================= */

.home_dresses_copy {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        clamp(45px, 5vw, 76px);

    text-align:
        left;
}


/* =========================================================
   HEADING
========================================================= */

.home_dresses_copy h2 {
    margin:
        10px 0 18px;

    font-family:
        var(--zoom-serif);

    font-size:
        clamp(
            2.5312rem,
            4vw,
            3.8438rem
        );

    font-weight:
        400;

    line-height:
        .98;
}


/* =========================================================
   BODY COPY
========================================================= */

.home_dresses_copy p:not(.eyebrow) {
    max-width:
        430px;

    margin-bottom:
        13px;

    font-size:
        0.7812rem;

    line-height:
        1.85;
}


/* =========================================================
   LINK
========================================================= */

.home_dresses_copy .text_link {
    margin-top:
        5px;
}


/* =========================================================
   IMAGES
========================================================= */

.home_dresses_image {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        hidden;

    background:
        var(--zoom-cream);
}


.home_dresses_image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .home_dresses_grid {
        grid-template-columns:
            1fr 1fr;
    }


    /* Copy comes first */

    .home_dresses_copy {
        grid-column:
            1 / -1;

        grid-row:
            1;

        align-items:
            center;

        padding:
            52px var(--zoom-pad) 46px;

        text-align:
            center;
    }


    .home_dresses_copy p:not(.eyebrow) {
        max-width:
            560px;
    }


    /* Two images underneath */

    .home_dresses_image_left {
        grid-column:
            1;

        grid-row:
            2;
    }


    .home_dresses_image_right {
        grid-column:
            2;

        grid-row:
            2;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

    .home_dresses_grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       TEXT FIRST
    ----------------------------------------------------- */

    .home_dresses_copy {
        grid-column:
            1 / -1;

        grid-row:
            1;

        align-items:
            center;

        padding:
            44px 28px 38px;

        text-align:
            center;
    }


    .home_dresses_copy .eyebrow {
        text-align:
            center;
    }


    .home_dresses_copy h2 {
        margin:
            12px 0 20px;

        font-size:
            clamp(
                2.6rem,
                12vw,
                3.35rem
            );

        font-weight:
            500;

        line-height:
            .98;
    }


    .home_dresses_copy p:not(.eyebrow) {
        max-width:
            420px;

        margin-right:
            auto;

        margin-left:
            auto;

        font-size:
            var(--zoom-body-size);

        line-height:
            1.8;
    }


    .home_dresses_copy .text_link {
        margin-top:
            9px;
    }


    /* -----------------------------------------------------
       TWO SQUARE THUMBNAILS
    ----------------------------------------------------- */

    .home_dresses_image {
        width:
            100%;

        min-height:
            0;

        aspect-ratio:
            1 / 1;
    }


    .home_dresses_image_left {
        grid-column:
            1;

        grid-row:
            2;
    }


    .home_dresses_image_right {
        display:
            block;

        grid-column:
            2;

        grid-row:
            2;
    }


    .home_dresses_image img {
        width:
            100%;

        height:
            100%;

        object-fit:
            cover;
    }

}