:root {
  --font-base: 15px;
  --font-xs: 12px;
  --font-s: 14px;
  --font-m: 18px;
  --font-l: 26px;
  --font-xl: 32px;
}

#page-club .club-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 24px;
  align-items: flex-start;
}
#page-club .club-info {
  font-size: var(--font-s);
}
#page-club a img {
  opacity: 1;
  transition: opacity 0.3s;
}
#page-club a:hover img {
  opacity: 0.7;
}
@media screen and (min-width: 640px) {
  #page-club .club-items {
    grid-template-columns: 1fr 1fr;
  }
  #page-club .club-info {
    font-size: var(--font-base);
  }
}
@media screen and (min-width: 768px) {
  :root {
    --font-base: 16px;
    --font-m: 20px;
    --font-l: 28px;
    --font-xl: 36px;
  }
  #page-club .club-items {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 96px 5%;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --font-m: 24px;
    --font-l: 32px;
    --font-xl: 40px;
  }
}