.article-banner {
  height: 47rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.article-square {
  background-color: #333;
  padding: 2.5rem;
  color: #fff;
}

.article-square:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.img-container { position: relative; }

.article-title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.65);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.individual-article:hover .article-title { opacity: 1; }

.article-title > p { font-style: normal; }

@media (max-width: 767.98px) {

  .article-banner { height: 35rem; }

  .article-square {
    background-color: #ebf0f2;;
    padding: 3rem;
    color: #333;
  }

}