.content-grid {

    & .grid {
        display: flex;
        flex-direction: column;
        gap: 15px;

        & .content {
            position: relative;

            & .content-wrapper {
                width: 100%;
                height: 100%;
                color: var(--white);
                position: absolute;
                top: 0;
                left: 0;
                padding: var(--safe-space);
            }

            & .content-wrapper, .content-to-show {
                display: flex;
                flex-direction: column;
                gap: calc(var(--font-size-base) * 2);

                /* text styling */
                & h1, h2, h3, h4, h5, h6 {
                    font-family: var(--font-canela);
                    font-weight: 700;
                }
                & p, h1, h2, h3, h4, h5, h6, .content-link {
                    color: var(--white);
                    margin: 0;
                }
                & .content-link {
                    font-family: var(--font-canela);
                    text-transform: uppercase;
                    text-decoration: unset;
                }
                & p {
                    font-size: calc(var(--font-size-base) * 1.75);
                    font-weight: 300;
                    line-height: 1.5em;
                }
                /* add margin only if heading has an element before */
                & * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
                    margin-top: calc(var(--font-size-base) * 2);
                }
                /* font sizes */
                & h1 {
                    font-size: calc(var(--font-size-base) * 6);
                }
                & h2 {
                    font-size: calc(var(--font-size-base) * 5);
                }
                & h3 {
                    font-size: calc(var(--font-size-base) * 4);
                }
                & h4 {
                    font-size: calc(var(--font-size-base) * 3);
                }
                & h5 {
                    font-size: calc(var(--font-size-base) * 2.5);
                }
                & h6 {
                    font-size: calc(var(--font-size-base) * 2);
                }
            }

            & .content-to-show {
                visibility: hidden;
                opacity: 0;
                transform: translateY(50%);
                transition: all var(--transition-standard);
            }
            &.--content-visible .content-to-show {
                visibility: visible;
                opacity: 1;
                transform: translateY(0);
            }

            &::before {
                content: "";
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, .3);
                display: block;
                position: absolute;
                top: 0;
                left: 0;
            }

            /* cta style */
            .content-cta {
                font-family: var(--font-canela);
                font-size: calc(var(--font-size-base) * 2.25);
                text-underline-offset: var(--font-size-base);
                color: var(--white);
                display: flex;
                align-items: center;
                gap: calc(var(--font-size-base) * 2);

                & svg {
                    height: 44px;
                    width: auto;
                }

                &:hover {
                    text-decoration: none;
                }
            }
            
        }

        @media (min-width: 768px) {
            flex-direction: row;
        }
        @media (min-width: 768px) and (max-width: 991.98px) {
            & .content {
                & .content-wrapper {
                    padding: calc(var(--safe-space) / 2);
                }
            }
        }
    }
}