.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; } .right-floating-image { float: right; }