// ARTICLE
.article{
    display: flex;
    margin-top: 1.5rem;

    @include desktop{

        &:hover .article__image{
            opacity: 0.75;
        }
        &:hover .article__title{
            color: $main;
        }
    }
}
.article__image{
    flex-shrink: 0;
    display: block;
    width: 9rem;
    height: 9rem;
    object-fit: cover;

    @include mobile--small{
        width: 6rem;
        height: 6rem;
    }
    @include desktop--large{
        width: 12rem;
        height: 12rem;
    }
    @include desktop{
        @include transition(opacity);
    }
}
.article__content{
    padding-left: 1.5rem;
}
.article__category{
    display: block;
    line-height: $font-leading;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: $main;
}
.article__title{
    margin-top: 0;
    font-family: $font-family--heading;
    font-weight: 700;
    font-size: 1 * $font-scale * 1rem; // same as h3
    color: $grey--dark;

    @include desktop{
        @include transition(color);
    }
}
.article__description{
    color: $grey--medium;
}
.article__date{
    display: block;
    line-height: $font-leading;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: $grey--medium;
}