/**
 * Fichier  : /pages/homepage/section-1/assets/css/grid.css
 * Fonction : style de la section 1 de la page d'accueil
 */


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

#summary main {
    display: grid;
    grid-template-columns: 22em 22em 20em;
    justify-items: center;
    justify-content: center;
    align-items: center;
    gap: .5em;
}


/* ==================================================
   ITEM
================================================== */

#summary main .item {
    height: 22em;

    padding: 2em 3em;

    border: 1px solid #eee;
    border-radius: var(--block-borderRadius);
    box-shadow: 0 0 10px #00000020;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6em;
}

#summary main .item div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: .5em;
}


/* ==================================================
   BACKGROUNDS
================================================== */

#summary main .item.women {
    background-image:
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.40) 60%,
            rgba(0, 0, 0, 0.10) 100%
        ),
        url("https://dermaboost.fr/wp-content/uploads/2026/05/1671717725132.webp");
}

#summary main .item.men {
    background-image:
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.70) 0%,
            rgba(0, 0, 0, 0.40) 60%,
            rgba(0, 0, 0, 0.10) 100%
        ),
        url("https://dermaboost.fr/wp-content/uploads/2026/05/1711609636074.webp");
}


/* ==================================================
   TEXT
================================================== */

#summary main .item h4 {
    font-family: 'aesthetic-font';
    font-size: 1.5em;
    letter-spacing: 1px;
}

#summary main .item p {
    font-family: 'content-font';
    font-size: .9em;
    line-height: 1.4em;
}

#summary main .item h4,
#summary main .item p {
    text-align: center;
    color: var(--color__3);
}

#summary main .item.women h4,
#summary main .item.women p,
#summary main .item.men h4,
#summary main .item.men p {
    color: #fff;
}


/* ==================================================
   BUTTON
================================================== */

#summary main .item a {
    margin-top: 10px;

    height: var(--button-height);
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #111;
    border: 1px solid #333;
    border-radius: var(--button-borderRadius);

    font-family: 'content-font';
    font-size: 14px;
    color: #fff;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media screen and (max-width: 1024px) {

    #summary main {
        display: flex;
        flex-direction: column;
    }

    #summary main .item.cta {
        height: 16em;
    }

}