.article {

}

.article-head {
    margin-bottom: 2rem;
}

.article-head .title {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--primary-color);
}

.article-head .lead-image img{
    max-height: 100%;
    object-fit: cover;
    object-position: center;
}

.article-content-container {
    margin-top: 0;
}

.article-content-container .article-content
{
    margin: 1rem 0;
}

.article-content-container .inner-title {
    font-weight: bold;
    font-size: 1.7rem;
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
}

.article-content-container p {
    font-size: 1.25rem;
}

p.article-content.lead{
    font-weight: bold;
}

p.article-content.quote {
    padding-left: 1rem;
    font-weight: bold;
    font-size: 1.5rem;
    border-left: 6px solid var(--primary-color);
}

.article-content.image {
    width: 100%;

}
.article-content.image img {
    width: 100%;
    object-fit: cover;

}

.article-content.image .description {
    display: block;
    font-size: 0.95rem;
    font-style: italic;
    padding: 0.75rem;
    background-color: #f4f4f4;
}

.article-content.image .source {
    font-style: italic;
}

.article-content.embedded {
    display: block;
    margin: auto 0;
    width: 100%;
}

.article-content.embedded * {
    display: block;
    margin: 0 auto;
}

.article-content.embedded.youtube-16-9 * {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}


/* --- WIDGET --- */

.article-widget {
    padding: 0 1.5rem 1.5rem 0.75rem;
    margin-top: 1rem;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    text-overflow: fade;
}

.article-widget .title {
    display: block;
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
    text-decoration: none;
}

.article-widget .title:hover {
    text-decoration: underline;
}

.article-widget .image-holder {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.article-widget .image {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;

}
.article-widget .image:hover {

    transform: scale(1.05);
}


.article-widget.highlighted .image {
   object-position: center;
}

.article-widget.highlighted .image:hover {
    transform: scale(1.025);
}


.article-widget .lead {
    font-size: 1.05rem;
}

/* sm */
@media (min-width: 576px)
{
    .article-widget {
        border-bottom: none;
    }
}

/* lg */
@media (min-width: 992px) {
    .article-content.image,
    .article-content.embedded,
    .article-content.widget.file-download{
        display: block;
        width: 75%;
        margin: 1rem auto;
    }

    .article-widget.highlighted .image-holder {
        max-height:600px;
    }


}