.bento-grid {

  display: grid;
  grid-gap: 1.5rem;

  > div {
    position: relative;
    /* background: grey; */
    aspect-ratio: 1;
  }

}

.bento-grid.hero-double {

  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
   "left left right right"
   "left left right right";

  > div:first-child {
    grid-area: left;
    height: 100%;
  }

  > div:last-child {
    grid-area: right;
    height: 100%;
  }

}

@media only screen and (max-width: 700px)  {

  .bento-grid.hero-double {

    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
     "left"
     "left"
     "left"
     "left"
     "left"
     "left"
     "right"
     "right"
     "right"
     "right"
     "right"
     "right";

  }

}