@layer components {
  .hero-copy-side {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    justify-content: center;
  }

  .hero-side-card {
    margin-top: var(--space-2);
  }

  .poker-highlights {
    display: grid;
    gap: 6px;
    font-size: 0.9rem;
  }

  .poker-steps,
  .event-bullets,
  .package-list,
  .etiquette-list,
  .holdem-points,
  .contact-list {
    display: grid;
    gap: 6px;
    font-size: 0.9rem;
  }

  .poker-steps li::before,
  .event-bullets li::before,
  .package-list li::before,
  .etiquette-list li::before,
  .holdem-points li::before {
    content: "";
  }

  .how-it-works-grid {
    align-items: stretch;
  }

  .how-it-works-details {
    align-items: stretch;
  }

  .event-image-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(226, 214, 194, 0.9);
  }

  .event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .holdem-table th,
  .holdem-table td {
    padding: 10px 12px;
    font-size: 0.9rem;
    text-align: left;
    vertical-align: top;
  }

  .holdem-table thead {
    background-color: #f6eee0;
  }

  .holdem-table tbody tr:nth-child(even) {
    background-color: #fffaf0;
  }

  .dining-grid,
  .private-grid,
  .etiquette-grid {
    align-items: stretch;
  }

  .reserve-grid {
    display: grid;
    gap: var(--space-6);
  }

  @media (min-width: 900px) {
    .reserve-grid {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      align-items: flex-start;
    }
  }

  .reserve-form .field-grid {
    display: grid;
    gap: var(--space-4);
  }

  @media (min-width: 640px) {
    .reserve-form .field-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .contact-list .contact-label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }
}