/* grid styles, all in a pair of outer braces----- */

@media (min-width: 600px) {
  main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(7, [row] auto  );
    grid-gap: 35px;
  }

  .volumen {
    grid-column: span 20;
    grid-row: span 4;
  }
  .maxportrait {
    grid-column: span 4;
    grid-row: span 3;
  }
  .bigsquare {
    grid-column: span 5;
    grid-row: span 3;
  }
  .landscape {
    grid-column: span 6;
    grid-row: span 3;
  }
  .tallthin {
    grid-column: span 4;
    grid-row: span 3;
  }
   .panorama {
    grid-column: span 11;
    grid-row: span 4;
  }
   .placard {
    grid-column: span 9;
    grid-row: span 4;
  }
  .letterbox {
    grid-column: span 8;
    grid-row: span 1;
    max-height: ;
  }
  .postcard {
    grid-column: span 4;
    grid-row: span 1;
    max-height: ;
  }
}

/* generic style ------------------------------ */
.figure-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 18em;
}