.article-grid {
  display: flex;
  margin: 1rem;
}



.article{
  display: flex;
  flex-direction: column;
  transition: all 300ms ease-in-out;
  max-width: 30vw;
  width: 25%;
}
.article > div {
  display: flex;
  flex-direction: column;
  transition: all 300ms ease-in-out;
}
.article > div > img {
  transition: all 200ms ease-in-out;
  max-width: 20vw;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.article.open{
  background-color: red;
  z-index: 10;
}

.article.open >div > img{
  order:2;
  max-width: 100vw;
  width: 50vw;
}

.article.open >div > h1{
  order:1;
}


.article.open >div > p{
  order:3;
}

.article.closed {
  max-width: 0vw;
  overflow: hidden;
}