.blog-article-preview {
    position: relative;

    & .banner {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        overflow: hidden;
        z-index: 1;

        & img {
            width: 100%;
            height: auto;
            max-height: 100%;
            object-fit: cover;
            mask-image: linear-gradient(-92deg, rgba(0,0,0,1), rgba(0,0,0,0));
        }
    }

    & .content {
        position: relative;
        z-index: 2;
    }

    & .pre-heading {
        font-style: italic;
    }
}

.course {
    &.grid {
        grid-template-columns: 1fr auto;
    }

    & .description {
        gap: var(--xs);
    }
}

.bulletpoints {
    & h1 {
        text-align: center;
    }

    & .grid {
        grid-template-columns: auto 300px;
    }

    & .icon-container {
        --dim: var(--xxl);
        width: var(--dim); height: var(--dim);
        padding: var(--xs);
        border-radius: 100%;
        background-color: var(--primary);
    }
}

.mid-section-tile {
    font-size: var(--xl);
    gap: 0 !important;

    &.double {
        justify-content: space-around;
        grid-column: 1 / span 2;
    }

    &.grid {
        grid-template-columns: auto 1fr;
    }

    & .large {
        font-size: var(--xxl);
    }

    & img {
        height: calc(2 * var(--xxl));
        padding: var(--m);
    }

    & span {
        display: block;
        text-align: center;
    }
}

.score {

}