@layer components {
  /* The price of one course date: what you pay, large, with the VAT-inclusive price underneath. */
  .date-price {
    display: grid;
    gap: 0.1rem;
    margin-block-start: 0.2rem;
  }

  .date-price__amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6ch;
  }

  .date-price__main {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-ink);
  }

  .date-price__note {
    font-size: var(--text-small);
    color: var(--color-subtle);
  }

  .date-price__warning {
    margin-block-start: 0.4rem;
  }
}