section.course-intro {

    & .course-wrapper {
        display: flex;
        flex-direction: column;
        background-color: var(--sand-alt);
        
        & .course-img {
            flex: 1;
            padding-bottom: var(--safe-space);

            & img {
                margin-top: calc(0px - var(--safe-space));
                margin-left: calc(0px - var(--safe-space));
            }
        }
        
        & .course-content {
            display: flex;
            flex-direction: column;

            padding: var(--safe-space);
            flex: 1;

            gap: calc(var(--safe-space) / 2);

            /* text styling */
            & h1, h2, h3, h4, h5, h6 {
                font-family: var(--font-canela);
            }
            & p, h1, h2, h3, h4, h5, h6 {
                color: var(--color-paragraph-solid);
                margin: 0;
            }
            & p {
                color: var(--color-paragraph);
                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);
                font-weight: 700;
            }
            & h2 {
                font-size: calc(var(--font-size-base) * 5);
                font-weight: 400;
            }
            & h3 {
                font-size: calc(var(--font-size-base) * 4);
                font-weight: 400;
            }
            & h4 {
                font-size: calc(var(--font-size-base) * 3);
                font-weight: 400;
            }
            & h5 {
                font-size: calc(var(--font-size-base) * 2.5);
                font-weight: 300;
            }
            & h6 {
                font-size: calc(var(--font-size-base) * 2);
                font-weight: 300;
                text-transform: uppercase;
            }

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

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

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

        @media (min-width: 992px) {
            flex-direction: row;
        }

        @media (min-width: 992px) {
            & .course-img {
                width: 60%;
                flex: 0 0 auto;
            }
            
            & .course-content {
                width: 40%;
                flex: 0 0 auto;
            }
        }
    }
}