.grid {
    --columns: 12;
    --gutter: 1.5rem; 
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: 1fr;
  }
  .grid:first-child {
  padding-top: 5em;
  }
  .grid:last-child {
  padding-bottom: 5em;
  }
  .grid > .column {
    margin-bottom: var(--gutter);
    overflow-wrap: break-word;
  }
    
  @media screen and (min-width: 60rem) {
    .grid {
      grid-template-columns: repeat(12, 1fr);
      
    }
    .grid > .column {
      grid-column: span var(--columns);
  overflow-wrap: break-word;
    }

  
}


img {
    width: 100%;
    height: 100%;
    max-height: 90vh;
    object-fit: contain;
}

.img {
    position: relative;
    display: block;
    --w: 1;
    --h: 1;
    padding-bottom: calc(100% / var(--w) * var(--h));
}
.img img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}