/* Rules page */
.rules-page { max-width: 1180px; margin: 0 auto; padding: clamp(34px, 4vw, 52px) 20px 88px; }
.rules-page > h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(42px, 5vw, 64px); line-height: 1.04; font-weight: 500; letter-spacing: -.04em; }
.rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; margin-top: clamp(30px, 4vw, 48px); }
.rules-card { min-width: 0; text-align: center; }
.rules-card__number { display: block; margin-bottom: 10px; font-size: 25px; font-weight: 900; }
.rules-card__art { position: relative; display: grid; width: 132px; height: 110px; margin: 0 auto 10px; place-items: center; border-radius: 46% 54% 47% 53%; background: color-mix(in srgb, var(--rule-color) 18%, #fff); }
.rules-card__art > span { font-size: 74px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(72, 55, 43, .18)); }
.rules-card__art i { position: absolute; right: -13px; bottom: -7px; font-size: 42px; font-style: normal; transform: rotate(-10deg); }
.rules-card--blue { --rule-color: #62c3e4; }
.rules-card--coral { --rule-color: #ef7654; }
.rules-card--yellow { --rule-color: #e9b23d; }
.rules-card--orange { --rule-color: #ec9c36; }
.rules-card--aqua { --rule-color: #66bdbb; }
.rules-card h2 { margin: 0 auto; max-width: 330px; font-size: clamp(19px, 2vw, 24px); line-height: 1.18; font-weight: 500; }

@media (max-width: 820px) {
  .rules-page { padding-right: 16px; padding-left: 16px; }
  .rules-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 34px; }
  .rules-card { display: grid; grid-template-columns: 34px 116px minmax(0, 1fr); column-gap: 10px; align-items: center; text-align: left; }
  .rules-card__number { align-self: start; margin: 8px 0 0; font-size: 20px; text-align: center; }
  .rules-card__art { width: 105px; height: 96px; margin: 0; border-radius: 42% 58% 48% 52%; }
  .rules-card__art > span { font-size: 62px; }
  .rules-card__art i { right: -10px; bottom: -4px; font-size: 30px; }
  .rules-card h2 { grid-column: 3; margin: 0; }
  .rules-card h2 { font-size: 20px; }
}