/*  --------|| HERO ||--------    */

.hero {
    padding: 0 1rem;
    margin: 0 auto 2rem auto;
}

.hero h1 {
    font-size: var(--font-size-32);
    font-weight: 400;
    font-variation-settings: "wdth" 116;
    text-align: center;
}

.title-breakline-s {
    display: block;
}

.title-bold {
    font-weight: 700;
}

span .title-underline {
    display: inline-block;
    position: relative;
}

.title-underline::after {
    content: "";
    position: absolute;
    background-image: url(../img/shapes/underline-title.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 220px;
    height: 16px;
    right: 0;
    bottom: -0.6rem;
}

.labels {
    margin-top: 1.5rem;
    text-align: center;
}

.label {
    display: inline-block;
    color: var(--velvet-600);
    font-weight: 500;
    font-size: var(--font-size-12);
    padding: .6rem .5rem;
    border-radius: 100px;
    margin-top: 1rem;
}

/*  -----------|| LABELS ||-----------    */

.label-01 {
    background-color: var(--bubblegum-500);
}

.label-02 {
    background-color: var(--lime-500);
}

.label-03 {
    color: var(--toast-100);
    background-color: var(--grass-700);
}

.label-04 {
    display: none;
    color: var(--cornflower-800);
    background-color: var(--lime-500);
}

.label-05 {
    background-color: var(--cornflower-500);
}

.label-06 {
    background-color: var(--toast-500);
}

.label-07 {
    background-color: var(--cirkus-500);
}

/*  -----------|| CONTENT ||-----------    */

.split-content {
    margin: 2rem 0;
}


section h2::after {
    content: "";
    position: absolute;
    background-image: url(../img/shapes/underline-bubblegum.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 140px;
    height: 4px;
    left: 1rem;
    bottom: -0.3rem;
}


a.link-label {
    text-decoration: none;
}

.split-content h2 {
    margin-bottom: 1rem;
}

.reframed-shapes-split {
    margin-top: 2.5rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 4%;
}

img.split-shape {
    display: inline-block;
    height: 45px;
}

img.shape-hide-s,
img.shape-hide-m,
img.shape-hide-l {
    display: none;
}






/*------------------------------------------*/
/*---------------|| Tablet ||---------------*/
/*------------------------------------------*/

@media(min-width:700px) {

    /*  --------|| HERO ||--------    */

    .hero {
        margin-bottom: 3rem;
    }

    .hero h1 {
        font-size: var(--font-size-50);
        font-variation-settings: "wdth" 116;
    }

    .title-underline::after {
        width: 340px;
        bottom: -0.5rem;
    }

    .labels {
        margin-top: 2rem;
    }

    .label {
        font-weight: 400;
        font-size: var(--font-size-16);
        padding: .8rem 1rem;
        margin-top: 0;
    }

    /*  -----------|| CONTENT ||-----------    */

    .split-content {
        margin-bottom: 2rem;
    }

    .reframed-shapes-split {
        margin: 2.5rem 0 3rem 0;
        justify-content: space-between;
        align-items: center;
    }

    img.shape-hide-s {
        display: inline-block;
        height: 50px;
    }

    img.shape-hide-m {
        display: inline-block;
        height: 20px;
    }

    section:nth-of-type(3){
        margin-top: 3rem;
    }


}


/*-------------------------------------------*/
/*---------------|| Desktop ||---------------*/
/*-------------------------------------------*/

@media(min-width:1100px) {

    /*  --------|| HERO ||--------    */
    .hero {
        width: var(--mw-desktop);
        padding: 0;
        margin: 0 auto 10rem auto;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .hero-tagline {
        width: 60%;
        position: relative;
    }

    .hero-tagline h1 {
        font-size: var(--font-size-58);
        font-variation-settings: "wdth" 116;
        text-align: left;
    }

    .hero-tagline::after {
        content: "";
        background-image: url(../img/shapes/header-arrow.svg);
        background-repeat: no-repeat;
        width: 316px;
        height: 106px;
        position: absolute;
        top: -0.6rem;
        right: -7rem;
    }

    .hero h1::before {
        content: "";
        display: block;
        width: 100px;
        height: 100px;
        background-image: url(../img/shapes/star-12.svg);
        position: absolute;
        top: -0.5rem;
        left: 12.5rem;
        z-index: -1;
        animation: rotation 26s infinite linear;
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .title-underline::after {
        width: 420px;
        right: -0.5rem;
        bottom: -0.5rem;
    }

    .title-breakline-l {
        display: block;
    }

    .labels {
        width: 40%;
        position: relative;
    }

    .labels::before {
        content: "";
        background-image: url(../img/shapes/vortex-blue.svg);
        background-repeat: no-repeat;
        width: 130px;
        height: 82px;
        position: absolute;
        bottom: -3.8rem;
        left: 2rem;
    }

    .label {
        position: absolute;
        font-size: var(--font-size-20);
    }

    /*  -----------|| LABELS ||-----------    */
    .label-01 {
        top: -2.5rem;
        right: 10rem;
        transform: rotate(-20deg);
    }

    .label-02 {
        top: -3rem;
        right: 1rem;
        transform: rotate(4deg);
    }

    .label-03 {
        right: 13.5rem;
        bottom: 4rem;
        transform: rotate(16deg);
    }

    .label-04 {
        display: block;
        font-size: var(--font-size-32);
        font-weight: 700;
        padding: .4rem .8rem;
        right: 9rem;
        bottom: 5rem;
        transform: rotate(25deg);
    }

    .label-05 {
        right: 0;
        bottom: 4.5rem;
        transform: rotate(10deg);
    }

    .label-06 {
        right: 6rem;
        bottom: 1rem;
        transform: rotate(-18deg);
    }

    .label-07 {
        right: 0;
        bottom: 0;
        transform: rotate(-4deg);
    }

    /*  -----------|| CONTENT ||-----------    */


    .split-content {
        margin-bottom: 7rem;
        position: relative;
        display: flex;
        align-content: center;
        gap: 5%;
    }


    .split-left {
        flex-basis: 55%;
    }

    .split-right {
        flex-basis: 40%;
        position: relative;
    }

    .reframed-shapes-split {
        margin-top: 0;
        display: block;
    }

    .split-shape {
        position: absolute;
    }

    img.shape-hide-l {
        display: inline-block;
    }

    img.split-shape {
        height: 100%;
    }

    .speech-icon {
        max-height: 130px;
        left: 0.5rem;
    }

    .pill-bleue {
        max-height: 60px;
        left: 13.5rem;
        top: 0.5rem;
    }

    .zigzag-green {
        max-height: 120px;
        right: 0;
    }

    .block-dark {
        max-height: 60px;
        top: 10rem;
        left: 6rem;
    }

    .star-pink {
        max-height: 114px;
        right: 3rem;
        top: 9rem;
    }

    .rectangle-pink {
        max-height: 98px;
        bottom: 1.5rem;
        left: 1rem;
    }

    .keyframe-blue {
        max-height: 88px;
        bottom: 0.5rem;
        right: 10.5rem;
    }

    .arch-orange {
        max-height: 80px;
        bottom: -2rem;
        right: 2rem;
    }

    .keyframe-easein-green {
        max-height: 75px;
        top: -4rem;
        left: 10rem;
        transform: rotate(-18deg);
    }

    .zigzag-pink {
        max-height: 120px;
        top: -1rem;
    }

    .pill-orange {
        max-height: 65px;
        top: 0;
        right: 3rem;
    }

    .cloud-blue {
        max-height: 80px;
        left: -1.5rem;
        top: 9rem;
    }

    .wave-green {
        max-height: 30px;
        bottom: 0.2rem;
        left: 4rem;
    }

    .autotest-circles {
        max-height: 200px;
        right: 0;
        bottom: 1rem;
    }

    .split-content:first-child::after {
        content: "";
        background-image: url(../img/shapes/content-arrow.svg);
        background-repeat: no-repeat;
        width: 70px;
        height: 88px;
        position: absolute;
        bottom: -6rem;
        left: 23rem;
        transform: rotate(14deg);
        scale: -100% 100%;
    }

      .split-content:nth-of-type(3){
        margin-top: 8rem;
        margin-bottom: 8rem;
      }

    .split-order-2 {
        order: 2;
    }
}