main {
  max-width: 1200px;
  margin-inline: auto;
  padding: 2rem;

  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.events {
  padding: 2rem;
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.spotlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.spotlights__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.spotlights__action {
  text-decoration: none;
  font-size: var(--text-sm);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-050);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  justify-self: flex-end;
}

.spotlights__action:hover {
  background-color: var(--color-neutral-600);
  transition: 0.2s;
}

@media (min-width: 750px) {

  main {
    display: grid;
    padding: 3rem;

    grid-template-columns: 1fr 1fr;
  }

  h1 {
    grid-column: 1 / 3;
  }

  .events {
    grid-column: 1 / 2;
  }

  .spotlights {
    grid-column: 1 / 3;
  }

  .spotlights__items {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (min-width: 1000px) {

  main {
    display: grid;
    padding: 3rem;

    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  h1 {
    grid-column: 1 / 5;
  }

  .events {
    grid-column: 1 / 3;
  }

  .spotlights {
    grid-column: 1 / 5;
  }

  .spotlights__items {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
  }
}