.expandable-box-A,
.expandable-box-B,
.expandable-box-C,
.expandable-box-D {
  /* position: relative;
  flex: 1;
  padding: 20px; */
  background: #222;
  /* overflow: hidden; */

  transition:
    flex        0.4s ease,
    padding     0.4s ease,
    background  0.4s ease;
}

.expandable-box-A img,
.expandable-box-B img,
.expandable-box-C img,
.expandable-box-D img {
  position: absolute;
  inset: 0;
  object-fit: cover;

  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.expandable-box-A.expanded,
.expandable-box-B.expanded,
.expandable-box-C.expanded,
.expandable-box-D.expanded {
  
  flex: 2;
  padding: 40px;
  background: #000;
}

.expanded img {
  transform: translateY(0);
  opacity: 1;
}