@layer component {
  .paragraph--license {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.75rem;
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    padding: 1.5rem 1.875rem 1.75rem 1.625rem;

    & .field--field-title h3 {
      color: var(--color-primary);
    }

    & .paragraph__content > .field--field-title h3 {
      font: var(--font-body-xl-semibold);
      letter-spacing: var(--letter-spacing-body-xl-semibold);
    }

    & .field--field-price {
      color: var(--color-text-secondary);
      font: var(--font-head-xs-semibold);
      letter-spacing: var(--letter-spacing-head-xs-semibold);
      margin-block-start: 0.25rem;
    }

    & .field--field-price::before {
      content: '$';
    }

    & .field--field-description {
      margin-block: 1rem;
    }

    & .button {
      align-self: start;
    }

    & .dialog__content > .field--field-title {
      font: var(--font-head-xs-regular);
      letter-spacing: var(--letter-spacing-head-xs-regular);
      margin-block-end: 1rem;
    }

    & .field--field-description-confirmation {
      color: var(--color-text-tertiary);
      font: var(--font-body-s-regular);
      letter-spacing: var(--letter-spacing-body-s-regular);
    }
  }

  @media screen and (min-width: 48rem) {
    .paragraph--license {
      padding: 1.875rem 2.375rem 2.125rem 2.125rem;

      & .dialog__content > .field--field-title h3 {
        font: var(--font-head-l-regular);
        letter-spacing: var(--letter-spacing-head-l-regular);
      }

      & .field--field-description-confirmation {
        font: var(--font-body-xl-regular);
        letter-spacing: var(--letter-spacing-body-xl-regular);
      }
    }
  }
}