a:hover img {
    outline: 1px solid var(--color-white);
    outline-offset: -1px;
  }
  .grid { 
    --gutter: 1.5rem;
  }
  h2.h1 {
    border-top: var(--border);
    letter-spacing: 0.03rem;
  }
  @media screen and (min-width: 64rem) {
    .grid {
        grid-template-columns: repeat(12, 1fr);
      }
    .grid > .column {
        --columns: 3;
        grid-column: span var(--columns);
    }
  }

@media screen and (max-width: 64rem) {
    .header {
        margin-bottom: 2rem;
      }

    .grid {
        grid-template-columns: repeat(12, 1fr);
        }
    .grid > .column {
        --columns: 4;
        grid-column: span var(--columns);
    }
}

@media screen and (min-width: 28rem) and (max-width: 40rem) {
    .header {
        margin-bottom: 2rem;
      }

    .grid {
        grid-template-columns: repeat(12, 1fr);
        }
    .grid > .column {
        --columns: 6;
        grid-column: span var(--columns);
    }    
}

@media screen and (max-width: 28rem) {
    .header {
        margin-bottom: 1rem;
      }
.grid { 
    --columns: 12;
    display: grid;
    grid-gap: var(--gutter);
    grid-template-columns: 1fr;
}

}