:root {
  --top-padding-offset: 1rem;
}

@media (min-width: 50rem) {
  :root {
    --top-padding-offset: 0px;
  }
}

.claim-container {
  container-type: inline-size;
  overflow-x: clip;
}

.claim {
  font-size: max(1rem, calc(var(--claim-scale) * 1cqw));
  width: 100cqw;
  margin-top: calc(-0.4em + 0.5em);
  margin-bottom: calc(-0.15em + 0.25em);
}

@media (min-width: 50rem) {
  .intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: ". intro" "gallery quicklinks";
    gap: 0 3rem;
    padding-bottom: 2rem;
  }
}

.intro {
  font-size: 1.15rem;
  grid-area: intro;
  max-width: 55em;
  text-wrap: pretty;
}

.intro,
.quicklinks {
  margin-top: 1.5rem;
}

@media (min-width: 50rem) {
  .intro,
  .quicklinks {
    font-size: 1.5rem;
  }
}

.quicklinks {
  color: var(--color-heading);
  grid-area: quicklinks;
  align-self: end;
  container-type: inline-size;
}

.quicklinks ul {
  list-style-type: "→";
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 0;
  margin-top: 0.5rem;
  padding: 0;
  padding-left: 0.875em;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-text);
}

@container (min-width: 25rem) {
  .quicklinks ul {
    font-size: 2rem;
    margin-top: 0.75rem;
    line-height: 1.3;
  }
}

@container (min-width: 40rem) {
  .quicklinks ul {
    font-size: 3rem;
    margin-top: 1rem;
    line-height: 1.2;
  }
}

.quicklinks ul > li {
  padding-left: 0.25em;
  hyphens: auto;
}

.quicklinks ul a {
  color: var(--color-text);
  text-wrap: balance;
  text-wrap: pretty;
}

.quicklinks ul a:hover {
  color: var(--color-heading);
}

.gallery {
  grid-area: gallery;
}

@media (min-width: 50rem) {
  .gallery {
    margin: 0;
  }
}

section.news,
section.events {
  container-type: inline-size;
}

@media (min-width: 50rem) {
  .news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0 3rem;
  }
}

article.desktop-only {
  display: none;
}

@media (min-width: 50rem) {
  article.desktop-only {
    display: block;
  }
}