/**
 * Fichier  : /pages/homepage/section-2/assets/css/style.css
 * Fonction : style général de la section écosystème
 */


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

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

#tools {
    background: #0d0d0d;
    color: var(--color-white);
}


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

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

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

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

#tools::before {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .035) 1px,
            transparent 1px
        );
}

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

#tools::before {
    opacity: .42;
}


/* ==================================================
   BACKGROUND ACCENT
================================================== */

#tools::after {
    content: "";
}

#tools::after {
    position: absolute;
    top: 15%;
    right: -10%;
}

#tools::after {
    width: 55vw;
    height: 55vw;
}

#tools::after {
    background:
        radial-gradient(
            circle,
            rgba(233, 64, 27, .08),
            rgba(233, 64, 27, .025) 35%,
            transparent 70%
        );
}

#tools::after {
    pointer-events: none;
}


/* ==================================================
   TOOLS
================================================== */

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

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

#tools .tools {
    margin: 0 auto;
}

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

#tools .tools {
    display: grid;
    grid-template-columns:
        minmax(300px, .85fr)
        minmax(480px, 1.15fr);
    align-items: start;
    gap: clamp(5em, 9vw, 10em);
}


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

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

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

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

}

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

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

    #tools::before {
        opacity: .35;
    }

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

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

}