/*
|--------------------------------------------------------------------------
| Article Cover
|--------------------------------------------------------------------------
*/

.blog-article-cover {

    width: 100%;

    margin: 0 0 var(--space-3xl);

    overflow: hidden;

    border-radius: var(--radius-xl);

    background: var(--surface-secondary);

}


/*
|--------------------------------------------------------------------------
| Cover Image
|--------------------------------------------------------------------------
*/

.blog-article-cover img {

    display: block;

    width: 100%;

    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;

}


/*
|--------------------------------------------------------------------------
| Cover Caption
|--------------------------------------------------------------------------
*/

.blog-article-cover figcaption {

    padding:
        var(--space-md) var(--space-lg);

    color: var(--text-muted);

    font-size: var(--font-xs);

    line-height: var(--lh-md);

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .blog-article-cover {

        margin-bottom: var(--space-2xl);

        border-radius: var(--radius-lg);

    }

    .blog-article-cover img {

        aspect-ratio: 16 / 10;

    }

}