/**
 * Fichier  : /pages/homepage/section-3/assets/css/style.css
 * Fonction : style général de la section média
 */


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

#media {
    position: relative;
    overflow: hidden;
}

#media {
    background: #f5f5f3;
    color: var(--color-black);
}


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

#media::before {
    content: "";
}

#media::before {
    position: absolute;
    inset: 0;
}

#media::before {
    pointer-events: none;
}

#media::before {
    background-image:
        linear-gradient(
            rgba(0, 0, 0, .03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .03) 1px,
            transparent 1px
        );
}

#media::before {
    background-size: 48px 48px;
}

#media::before {
    opacity: .5;
}


/* ==================================================
   MEDIA
================================================== */

#media .media {
    position: relative;
    z-index: 1;
}

#media .media {
    width: min(100% - 4em, 1320px);
}

#media .media {
    margin: 0 auto;
}

#media .media {
    padding:
        clamp(7em, 9vw, 10em)
        0;
}

#media .media {
    display: grid;
    grid-template-columns:
        minmax(300px, .72fr)
        minmax(560px, 1.28fr);
    align-items: center;
    gap: clamp(4em, 7vw, 8em);
}


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

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

    #media .media {
        width: min(100% - 3em, 760px);
    }

    #media .media {
        grid-template-columns: 1fr;
        gap: 4.5em;
    }

}

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

    #media::before {
        background-size: 40px 40px;
    }

    #media::before {
        opacity: .4;
    }

    #media .media {
        width: calc(100% - 2.4em);
    }

    #media .media {
        padding: 5em 0;
        gap: 3.5em;
    }

}