* {
  box-sizing: border-box;
}

main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  max-width: 1250px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 64px;
  background-color: white;
  border: 10px groove gold;
  
  gap: 32px;
}

html,
body {
  background-image: repeating-conic-gradient(
          in hsl longer hue,
          red,
          blue 180deg
  );
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 3rem;
  line-height: 0.9;
  text-align: center;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tilelist {
  display: grid;
  gap: 2px;
  justify-content: center;
  padding: 2px;
  background: blue;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
}

.tile {
  overflow: hidden;

  & a img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: smooth;
    transition: transform 200ms;

    &:hover {
      transform: scale(1.1);
    }
  }
}

.horizontal-list {
  display: flex;
  gap: 40px;
}