@layer components {
  .price {
    background-color: oklch(0.93 0.015 260);
    padding-block: 14cqi;
  }

  /* Title */
  .price__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqi;
    margin-block-end: 8cqi;
  }

  .price__title-sub {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: oklch(0.15 0 0);
    border-radius: var(--radius-full);
    padding-block: 1.25cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-accent-light);
  }

  .price__title-main {
    font-family: var(--font-hero);
    font-size: 8cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(0.15 0 0);
    text-align: center;
  }

  /* Slider */
  .price__slider {
    margin-block-end: 4cqi;
  }

  .price__slider-track {
    display: flex;
    gap: 4cqi;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: 12cqi;
    -webkit-overflow-scrolling: touch;
  }

  .price__slider-track::-webkit-scrollbar {
    display: none;
  }

  /* Card */
  .price__card {
    flex-shrink: 0;
    inline-size: 76cqi;
    border-radius: 2.5cqi;
    overflow: hidden;
    scroll-snap-align: center;
    box-shadow: 0 2px 12px oklch(0 0 0 / 0.08);
  }

  /* Card header */
  .price__card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqi;
    padding-block: 4.5cqi 4cqi;
    padding-inline: 3cqi;
    border-radius: 2.5cqi 2.5cqi 0 0;
  }

  .price__card-header--gray {
    background-color: oklch(0.6 0.03 260);
  }

  .price__card-header--blue {
    background-color: var(--color-accent);
  }

  .price__card-plan {
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(1 0 0);
    text-align: center;
  }

  .price__card-price {
    font-family: var(--font-hero);
    font-size: 6cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(1 0 0);
    text-align: center;
  }

  .price__card-price-tax {
    font-size: 4cqi;
  }

  .price__card-target {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: oklch(1 0 0);
    border-radius: 0.5cqi;
    padding-block: 0.5cqi;
    padding-inline: 2cqi;
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 800;
    line-height: 1.25;
    color: oklch(0.47 0.03 260);
  }

  /* Card body */
  .price__card-body {
    background-color: oklch(1 0 0);
    padding: 6cqi;
  }

  .price__card-pages {
    background-color: oklch(0.93 0.015 260);
    border-radius: 1.25cqi;
    padding: 4cqi;
    text-align: center;
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.25;
    color: oklch(0.47 0.03 260);
    margin-block-end: 6cqi;
  }

  .price__card-pages-num {
    font-size: 5cqi;
    font-weight: 800;
  }

  .price__card-section-title {
    font-family: var(--font-hero);
    font-size: 3.5cqi;
    font-weight: 700;
    line-height: 1.6;
    color: oklch(0.6 0.03 260);
    text-align: center;
    margin-block-end: 3cqi;
  }

  /* Option list */
  .price__card-options {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
  }

  .price__card-option {
    display: flex;
    align-items: center;
    gap: 2cqi;
  }

  .price__card-option-icon {
    flex-shrink: 0;
    inline-size: 5.5cqi;
    block-size: 5.5cqi;
  }

  .price__card-option-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.35;
    color: oklch(0.13 0 0);
    flex: 1;
    min-width: 0;
    max-inline-size: none;
    text-wrap: wrap;
  }

  /* Pagination */
  .price__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3cqi;
  }

  .price__pagination-dot {
    inline-size: 12.5cqi;
    block-size: 1.25cqi;
    border-radius: var(--radius-full);
    background-color: oklch(0.8 0.01 260);
  }

  .price__pagination-dot--active {
    background-color: oklch(0.3 0.03 260);
  }
}