/* article:first-of-type {
    margin-top: calc(var(--header-size) + 5rem);
} */

article {
    --space: 5rem;

    display: flex;
    flex-direction: row;

    flex-wrap: wrap;

    margin: var(--space) 0;
    padding: var(--space) 20%;

    box-sizing: border-box;

    justify-content: space-between;


    width: 100%;
}

article:nth-of-type(2n) {
    background-color: var(--low);
}


article>div {
    display: flex;
    flex-direction: row;

    justify-content: space-evenly;

    gap: 2rem;
}

article:nth-of-type(2n+1)>div {
    display: flex;
    flex-direction: row-reverse;

    gap: 2rem;
}

article>div>div {
    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    width: 50%;
}

article>div>img {
    margin: auto 0;
    box-sizing: border-box;

    height: 12rem;
}



.keypoints {
    margin-top: 5rem;

    display: flex;
    flex-direction: row !important;

    flex-wrap: wrap;

    justify-content: space-between;

    gap: 0;

    width: 100%;
}

.keypoints>div {
    display: flex;
    flex-direction: column;

    padding: 1rem 2rem 2rem;

    width: 30%;

    box-sizing: border-box;

    /* justify-content: space-evenly; */

    /* box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    border-radius: .6rem;

    background-color: var(--main);
}

.keypoints>div>p {
    color: var(--near-high);
}

.keypoints>div>h2 {
    color: var(--accent);
}





.a-modules {
    position: relative;

    margin: var(--header-size) 0 0;

    min-height: 100vh;
    height: fit-content;
    width: 100%;

    background-color: var(--trans);
    background-image:
        radial-gradient(at 86% 6%, hsla(199, 99%, 49%, 1) 0px, transparent 50%),
        radial-gradient(at 0% 42%, hsla(199, 61%, 47%, 1) 0px, transparent 50%),
        radial-gradient(at 22% 18%, hsla(199, 100%, 78%, 1) 0px, transparent 50%),
        linear-gradient(to bottom, var(--accent), var(--accent) 40%, var(--trans) 85%);
}

.a-modules:last-of-type {
    display: flex;
    flex-direction: column;


    background-image:
        radial-gradient(at 14% 94%, hsla(199, 99%, 49%, 1) 0px, transparent 50%),
        radial-gradient(at 100% 58%, hsla(199, 61%, 47%, 1) 0px, transparent 50%),
        radial-gradient(at 78% 82%, hsla(199, 100%, 78%, 1) 0px, transparent 50%),
        linear-gradient(to top, var(--accent), var(--accent) 40%, var(--trans) 85%);
}

.a-modules>.bg {
    position: absolute;

    height: 40%;
    width: 100%;

    top: 0;


    z-index: 1 !important;
}

/* .a-modules:last-of-type>.bg {
    top: auto;
    bottom: 0;
    transform: scaleY(-1);

} */

.a-modules * {
    z-index: 2;
}

.a-modules>.content {
    /* position: absolute; */

    margin: 0 10%;

    display: flex;
    flex-direction: column;
}

.a-modules>.content>div>h1 {
    color: var(--main);
    margin: 3rem auto 4rem;

    text-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px;

    font-size: 2.8rem;
}

.a-modules:last-of-type>.content>div>h1 {
    color: var(--black);
}

.a-modules>.content>div {
    display: flex;
    flex-wrap: nowrap;

    justify-content: center;
}

.a-modules>.content>div>div {
    display: flex;

    flex-direction: column;

    margin: 1rem;
    padding: 1rem 2rem;
    padding-bottom: 3rem;

    width: 100%;


    box-sizing: border-box;

    background-color: var(--main);

    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    border-radius: .5rem;
}

.a-modules>.content>div:nth-child(3)>div {
    width: 66%;
}

.a-modules>.content>div>div>h2 {
    margin: 3rem 0 1.5rem;

    display: flex;
    align-items: center;

    font-size: 1.5rem;

}

.a-modules>.content>div>div>h2>img {
    margin-right: .5rem;
    height: 1.5rem;
}

.a-modules>.content>div>div>p {
    margin: .5rem 0.75rem;

    color: var(--near-high);
}

.a-modules>.content>div>div>ul>li {
    color: var(--near-high);
}


@media (width <=768px) {
    .a-modules>.content>div:nth-child(3) {
        margin: 0;
        flex-wrap: wrap;

        width: 100%;
    }

    .a-modules>.content>div:nth-child(3)>div {
        width: 100%;
    }

    .a-modules:last-of-type>.content>div {
        flex-wrap: wrap;
    }

    .a-modules:last-of-type>.content>div>div {
        width: 100%;
    }

    article>div {
        flex-direction: column-reverse !important;
        flex-wrap: wrap;
    }

    article>div>div {
        width: 100%;
    }

    .keypoints {
        flex-direction: column;
        flex-wrap: wrap;
    }

    .keypoints>div {
        margin: 1rem 0;
        width: 100%;
    }
}