.onscrollcontent-wrap {
    display: grid;
    place-items: center;
    grid-template-areas: 'main';
    margin-top: 12vh;
}

.onscrollcontent {
    grid-area: main;
    display: grid;
    place-items: center;
    line-height: 1.2;
    grid-template-areas: 'content';
    z-index: 900;
}

.onscrollcontent-wrap .onscrollcontent:first-child {
    height: 50vh;
}

.onscrollcontent--layout {
    grid-template-areas: 'title-up title-down'
        'img img'
        'text text';
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.onscrollcontent__img {
    grid-area: img;
    max-width: 50%;
    height: auto;
}



.onscrollcontent__img--3 {
    /* aspect-ratio: 1000/560; */
    aspect-ratio: 1;
}

.onscrollcontent__img--6 {
    max-width: 100%;
}

.title-wrap {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
}

.title-rad {
    align-items: center;
    justify-content: center;
    /* text-shadow: 2px 2px #232323; */
    text-align: right;
    display: block;
    padding-bottom: 2vh;
    margin-bottom: 1vh;
    color: #e8e8e8;
}

.title {
    padding-top: 0.3em;
    line-height: 0.525;
    font-size: 2rem;
    font-family: CarroisGothic;
    font-variation-settings: "wdth" 140, "wght" 150;
    font-weight: 300;
    position: relative;
    z-index: 100;
    text-indent: -0.1em;
}

.title--up {
    grid-area: title-up;

}



.title--down {
    grid-area: title-down;
    font-variation-settings: "wdth" 50, "wght" 350;
}

.onscrollcontent__text {
    grid-area: text;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.5;
    font-family: CarroisGothic;
}

@media screen and (min-width: 53em) {
    .frame {
        grid-template-columns: auto auto 1fr;
        grid-template-areas: 'back prev sponsor';
        justify-items: start;
        grid-gap: 2rem;
    }

    .frame__prev {
        justify-self: end;
    }

    .title {
        font-size: 1.8rem;
        text-transform: uppercase;
        font-weight: bold;
        color: #FFF;
        text-shadow: 2px 2px #232323;
    }

    .title-6 {
        font-size: 1.8rem;
        line-height: 1.3;
        text-transform: uppercase;
        font-weight: bold;
    }

    .title-6B {
        font-size: 1.8rem;
        line-height: 1.3;
        text-transform: uppercase;
        font-weight: bold;
        text-align: left;
    }

    .onscrollcontent-wrap:not(:last-child) {
        margin-bottom: 1vmax;
        margin-top: 6vh;
    }

    .onscrollcontent__img {
        max-width: none;
    }

    .onscrollcontent__img--3 {
        width: 20vw;
        align-self: center;
    }

    .onscrollcontent__img--6 {
        max-width: 100%;
        border-radius: 15px;
    }

    .onscrollcontent__img--6B {
        max-width: 100%;
        border-radius: 15px;
    }

    .onscrollcontent--layout-3 {
        grid-template-areas: 'title-up img title-down'
            'text text text';
        grid-template-columns: 20vw auto 20vw;
        grid-template-rows: auto auto;
        row-gap: 2vh;
        column-gap: 0vw;
        justify-content: center;
        align-content: center;
    }

    .onscrollcontent--layout-6 {
        grid-template-areas: 'title-up img'
            'title-down img'
            'text img';
        grid-template-columns: 1fr 50%;
        grid-template-rows: auto auto 1fr;
        column-gap: 1vw;
        row-gap: 0;
    }

    .onscrollcontent--layout-6B {
        grid-template-areas:
            'img title-up'
            'img title-down'
            'img text';
        grid-template-columns: 1fr 55%;
        grid-template-rows: 1fr auto auto;
        column-gap: 1vw;
        row-gap: 0;
        margin-bottom: 5vh;
    }

    .title--up {
        justify-self: end;
        align-self: start;
    }

    .onscrollcontent--layout-3 .title--up {
        justify-self: end;
        align-self: center;
    }

    .onscrollcontent--layout-6 .title--up {
        justify-self: end;
        align-self: start;
    }

    .onscrollcontent--layout-6B .title--up {
        justify-self: end;
        align-self: start;
    }

    .title--down {
        justify-self: start;
        align-self: end;
    }

    .onscrollcontent--layout-3 .title--down {
        align-self: center;
    }

    .onscrollcontent--layout-6 .title--down {
        justify-self: end;
        align-self: start;
    }

    .onscrollcontent--layout-6B .title--down {
        justify-self: end;
        align-self: start;
    }

    .onscrollcontent--layout-3 .content__text {
        column-count: 2;
        column-gap: 4vw;
        max-width: 590px;
        text-align: justify;
    }

    .onscrollcontent--layout-6 .content__text {
        max-width: 20.5vw;
        justify-self: end;
        align-self: start;
        text-align: justify;
        /* text-shadow: 1px 1px #232323; */
        color: #e8e8e8;
        /* letter-spacing: 0; */
        font-size: 1.2rem;
        /* font-weight: 400; */
        margin-top: 8vh;
    }

    .onscrollcontent--layout-6B .content__text {
        max-width: 23.5vw;
        justify-self: center;
        align-self: start;
        text-align: justify;
        /* text-shadow: 1px 1px #232323; */
        color: #e8e8e8;
        font-size: 1.2rem;
        margin-bottom: 8vh;
    }
}

/* Mobile view */
@media screen and (max-width: 425px) {
    .onscrollcontent--layout {
        grid-template-areas:
            'text img'
        ;
    }

    .content__text {

        font-size: 0.8rem !important;
        letter-spacing: 0.75px !important;
        margin: 0 !important;
    }

    .onscrollcontent__img {

        max-width: 150%;

    }
}

.card-wrap {
    grid-template-columns: repeat(3, 250px);
}

body #cdawrap {
    justify-self: end;
}