@import url("main.css");
@import url("site/tokens.css");
@import url("site/events.css");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 4rem 1rem;
  background: #ecf1f1;
  text-align: center;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.container {
  /* main.cssの左右paddingを含め、トップページと同じ実効幅にする。 */
  width: min(100%, calc(var(--content-width) + 64px));
  margin: 0 auto;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 736px) {
  body {
    padding: 2rem 1rem;
  }

  .events-grid {
    grid-template-columns: 1fr;
    gap: var(--grid-gap-mobile);
  }
}