#look-page {
  margin: 1rem;

  .gallery {
    display: grid;
    gap: 1rem;

    @media (width < 40rem) {
      grid-template-columns: 1fr;
    }

    @media (width >= 40rem) {
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(3, minmax(20rem, 40vh));
      grid-template-areas:
      "a a b b c c"
      "a a d d e e"
      "f f f f e e";
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  #viewer {
    padding: 0;
    border: none;
    background: transparent;

    &::backdrop {
      background: rgba(0, 0, 0, 0.9);
    }

    img {
      max-width: 90vw;
      max-height: 90vh;
      display: block;
    }

    img:focus-visible {
      outline: 2px solid white;
    }
    img:focus {
      outline: none
    }
  }

  .arrow-link {
    margin-top: 1rem;
  }
}