.regulamin-page {
  background-color: var(--color-cream);
  color: var(--color-text);
  padding: var(--space-8) 0;
}

.regulamin-hero {
  margin-bottom: var(--space-7);
}

.regulamin-hero__inner {
  max-width: 45rem;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: left;
}

.regulamin-hero h1 {
  margin-bottom: var(--space-3);
}

.regulamin-hero__date {
  font-size: var(--text-caption);
  line-height: var(--text-caption-leading);
  color: rgba(53, 45, 42, 0.65);
  margin-bottom: 0;
}

.regulamin-section {
  margin-bottom: var(--space-7);
}

.regulamin-section:last-child {
  margin-bottom: 0;
}

.regulamin-section__inner {
  max-width: 45rem;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  text-align: left;
}

.regulamin-section h2 {
  margin-bottom: var(--space-4);
}

.regulamin-section h3 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

.regulamin-section p {
  margin-bottom: var(--space-4);
}

.regulamin-section ul {
  margin-bottom: var(--space-4);
  padding-inline-start: var(--space-4);
}

.regulamin-section li {
  margin-bottom: var(--space-2);
}

.regulamin-section--dark {
  background-color: var(--color-graphite);
  color: var(--color-cream);
  padding: var(--space-7) 0;
  margin-bottom: var(--space-7);
}

.regulamin-section--dark .regulamin-section__inner {
  color: var(--color-cream);
}

.regulamin-section--dark h2,
.regulamin-section--dark h3 {
  color: var(--color-cream);
}

.regulamin-section--dark p,
.regulamin-section--dark li {
  color: var(--color-cream);
}

.regulamin-section--dark a {
  color: var(--color-gold);
}

.regulamin-section--dark a:hover,
.regulamin-section--dark a:focus-visible {
  color: var(--color-cream);
}

@media (max-width: 48rem) {
  .regulamin-page {
    padding: var(--space-6) 0;
  }

  .regulamin-hero,
  .regulamin-section,
  .regulamin-section--dark {
    margin-bottom: var(--space-6);
  }

  .regulamin-section--dark {
    padding: var(--space-6) 0;
  }

  .regulamin-hero h1 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .regulamin-section h2 {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  .regulamin-section h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (max-width: 30rem) {
  .regulamin-hero h1 {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  .regulamin-section h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .regulamin-section h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}