website/assets/sass/article.scss

.article__date {
    font-style: italic;
}

.article__featured-image {
    max-width: 100%;

    img {
        max-width: 100%;
    }
}

.article {
}

.prominent-article {
    position: relative;
    overflow: hidden;

    .article__background {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        z-index: 0;
        transition: all 0.2s ease-in-out;
    }

    .article__background-overlay {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(1, 1, 1, 0.5);
        z-index: 1;
    }

    .article__content {
        position: relative;
        z-index: 2;
        color: white;
        padding: 2rem 0;
        
        .article__title {
            color: white;
            a {
                color: white;
                text-decoration: none;
            }
        }
        .article__summary {
        }
        .article__meta {
            margin-bottom: 1rem;
            opacity: 0.8;
        }
        .article__bottom {
            display: flex;
            justify-content: end;
        }
        .article__readmore {
            border: 1px solid white;
        }
    }

    &:hover {
        .article__background {
            transform: scale(1.1);
        }
    }
}

.less-prominent-articles {
    display: grid;
    grid-template-columns: 1fr 1fr;
}