/**
 * Fichier  : /pages/homepage/section-5/assets/css/style.css
 * Fonction : style général de la section Sport Business
 */


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

#business {
    position: relative;
}

#business {
    background: #fff;
}


/* ==================================================
   BUSINESS
================================================== */

#business .business {
    position: relative;
    overflow: hidden;
}

#business .business {
    box-sizing: border-box;

    padding:
        clamp(6em, 10vw, 10em)
        clamp(2em, 6vw, 6em)
        clamp(8em, 12vw, 12em);
}

#business .business {
    background:
        linear-gradient(
            90deg,
            rgba(11, 11, 11, .97) 0%,
            rgba(11, 11, 11, .92) 38%,
            rgba(11, 11, 11, .72) 70%,
            rgba(11, 11, 11, .62) 100%
        ),
        url("../img/background.jpg")
        center right / cover
        no-repeat;
}

#business .business {
    color:
        var(--color-white);
}


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

#business .business::before {
    content: "";
}

#business .business::before {
    position: absolute;
    inset: 0;
    z-index: 1;
}

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

#business .business::before {
    background-size:
        48px 48px;
}

#business .business::before {
    pointer-events: none;
}


/* ==================================================
   BUSINESS GLOW
================================================== */

#business .business::after {
    content: "";
}

#business .business::after {
    position: absolute;

    top: 38%;
    right: -12%;

    z-index: 1;
}

#business .business::after {
    width: 55vw;
    height: 55vw;
}

#business .business::after {
    background:
        radial-gradient(
            circle,
            rgba(233, 64, 27, .09) 0%,
            rgba(233, 64, 27, .025) 38%,
            transparent 70%
        );
}

#business .business::after {
    pointer-events: none;
}


/* ==================================================
   BUSINESS CONTENT
================================================== */

#business .business > * {
    position: relative;
    z-index: 2;
}

#business .business > .intro,
#business .business > .ecosystem,
#business .business > .expertise {
    width: min(100%, 1320px);
}

#business .business > .intro,
#business .business > .ecosystem,
#business .business > .expertise {
    margin-right: auto;
    margin-left: auto;
}

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

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

    #business .business {
        padding:
            5em
            1.4em
            7em;
    }

    #business .business {
        background:
            linear-gradient(
                180deg,
                rgba(11, 11, 11, .92) 0%,
                rgba(11, 11, 11, .88) 45%,
                rgba(11, 11, 11, .78) 100%
            ),
            url("../img/background.jpg")
            50% center / cover
            no-repeat;
    }

    #business .business::before {
        background-size:
            40px 40px;
    }

}