.cstudy-scroller__button-container {
    margin-block-start: 2rem;
}

.cstudy-scroller__view-all {
    margin-inline: auto;
}

.cstudy-post {
    color: white;

    display: grid;
    grid-template-areas: "img";
    gap: 0.5rem;
    grid-template-rows: auto auto 1fr;

}

.cstudy-post__content {
    position: relative;
    display: grid;
}

:where(.cstudy-post[data-display="inside"]) {
    isolation: isolate;
    position: relative;
    
    .cstudy-post__img-container {
        grid-area: img;
        z-index: -1;
    }

    .cstudy-post__header {
        grid-area: img;
        height: fit-content;
        margin: 1rem;
    }
    .cstudy-post__button-wrapper {
        justify-self: end;
        align-self: flex-end;
        grid-area: img;

        margin: 1rem;

        @media (min-width: 769px) and (hover: hover) {
            opacity: 0;
            transition: 250ms opacity;
            .cstudy-post:hover & {
                opacity: 1;
            }
        }
    }

    .cstudy-post__button::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
    }

    @media (max-width: 768px) {
        .cstudy-post__button {
            width: 100%;
        }
    }
}


@media (max-width: 768px) {
    .cstudy-post__button-wrapper {
        margin: 0;
        grid-area: auto;
        justify-self: auto;
        align-self: end;
        order: 1;
    
    }

    .cstudy-post__button {
        margin-inline: auto;
    }

    .cstudy-scroller__button-container {
        position: sticky;
        left: 0;
        margin-block-start: .5rem;
        width: 100%;

        .cstudy-scroller__view-all {
            width: calc(100cqi - calc(var(--site-padding) * 2));
            background-color: var(--tertiary-color);
        }
    }

}

:where(.cstudy-scroller[data-display="under"]) {
    .cstudy-scroller__content {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: auto auto 1fr;
    }
}

.cstudy-post[data-display="under"] {
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
}

:where(.cstudy-post[data-display="under"]) {
    .cstudy-post__img-container {
        grid-area: img;
    }
    .cstudy-post__taglist {
        order: -1;
    }
    .cstudy-post__header {
        margin: 0;
    }
    .cstudy-post__button-wrapper {
        align-self: end;
    }
}