@import 'shared.css';

#gallery {
  max-width: var(--w-5xl);
  margin: 0 auto;
  padding: var(--space-16) 1rem;

  display: grid;

  gap: 1rem;
  grid-template-columns: 1fr;

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }

  & > img {
    border-radius: var(--rounded-md);
    box-shadow:
      0 4px 6px -1px #ffffff9a,
      0 2px 4px -2px #ffffff9a;

    &:hover {
      transform: scale(1.01);
      transition: transform 300ms;

      box-shadow:
        0 8px 10px -1px #ffffff9a,
        0 4px 6px -2px #ffffff9a;
    }
  }
}