/* ========================================
   INDEX bento boxes
   ======================================== */

.layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-s); /*16px*/
  padding: var(--size-s) 0 var(--size-s) 0;
}

/* Generic box styling */
.box {
  position: relative;
  overflow: hidden;
  background: var(--color-yellow);
  border-radius: var(--radius-xs);
}

/* make the media container fill the box */
.box figure.media {
  margin: 0;
  width: 100%;
  height: auto;
}

/* IMAGE + VIDEO universal styling */
.box img,
.box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Desktop sizes */
.tall {
  flex: 1 1 45%;
  min-height: 280px;
}

.right-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 45%;
  gap: var(--size-s);
}

.right-col .small {
  flex: 1;
  min-height: 327px;
}

.wide {
  width: 100%;
  min-height: 300px;
}

.square {
  flex: 0 0 calc(50% - 10px); 
  aspect-ratio: 1 / 1;
  min-width: var(--img-min);
}


@media (max-width: 800px) {
  .layout {
    flex-direction: column;
  }

  .tall,
  .right-col,
  .right-col .small,
  .wide {
    flex: none;
    width: 100%;
    min-height: 139px;
  }

}