#payment-page {
  margin-top: 13.6rem;

  .payment-header {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 5.6rem;

    .payment-header__wrapper {
      display: flex;
      max-width: 101.4rem;
      width: 100%;
      height: 100%;

      .payment-header__item {
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;

        .payment-header__label {
          display: flex;
          flex-direction: column;
          align-items: center;

          .payment-header__best {
            display: inline-block;
            padding-block: 0.2rem;
            padding-inline: 1.2rem;
            border-radius: 1rem;
            color: var(--color-white);
            background-color: var(--color-warning);
            font-size: var(--font-label-small-size);
            font-weight: var(--font-label-small-m-weight);
            line-height: var(--font-label-small-line-height);
            letter-spacing: var(--font-label-small-letter-spacing);
          }

          .payment-header__text {
            font-size: var(--font-label-medium-size);
            font-weight: var(--font-label-medium-m-weight);
            line-height: 2rem;
            letter-spacing: var(--font-label-medium-letter-spacing);
          }
        }

        .payment-header__indicator {
          position: absolute;
          bottom: 0;
          display: none;
          width: 8.8rem;
          height: 0.2rem;
          background-color: var(--color-icon-primary);
        }
      }

      .payment-header__item--active {
        .payment-header__indicator {
          display: block;
        }
      }
    }
  }

  .main {
    min-height: calc(100dvh - 6.4rem - 7.2rem - 5.6rem);

    .payment {
      display: flex;
      justify-content: center;
      width: 100%;

      .payment__wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 101.4rem;
        width: 100%;
        margin: var(--spacing-xl);

        .payment-subscription {
          width: 100%;
          padding-block: var(--spacing-xl);
          padding-inline: var(--spacing-lg);
          border-radius: 1.5rem;
          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
          background-color: var(--color-frame-primary);

          .payment-subscription__section {
            display: flex;
            flex-direction: column;
            padding-bottom: var(--spacing-lg);
            margin-bottom: var(--spacing-md);
            border-bottom: 0.1rem solid var(--color-border-primary);

            .payment-subscription__title,
            .payment-subscription__text {
              font-size: var(--font-label-large-size);
              font-weight: var(--font-label-large-m-weight);
              line-height: var(--font-label-large-line-height);
              letter-spacing: var(--font-label-large-letter-spacing);
            }

            .payment-subscription__text {
              padding-top: var(--spacing-md);
              font-weight: 700;

              .payment-subscription__line-text {
                padding-left: var(--spacing-md);
                color: var(--color-gray-400);
                text-decoration: line-through;
                font-weight: var(--font-label-large-m-weight);
                font-size: var(--font-label-medium-size);
              }
            }

            .payment-period__list-discount-label {
              color: var(--color-warning);
              font-size: var(--font-label-medium-size);
              font-weight: var(--font-label-medium-m-weight);
              line-height: var(--font-label-medium-line-height);
              letter-spacing: var(--font-label-medium-letter-spacing);
            }
          }
        }

        .payment-subscription--hidden {
          display: none;
        }

        .payment-period {
          position: relative;
          width: 100%;
          padding-block: var(--spacing-xl);
          padding-inline: var(--spacing-lg);
          border-radius: 1.5rem;
          box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
          background-color: var(--color-frame-primary);

          .payment-period__badge {
            position: absolute;
            top: 0;
            right: 1.6rem;
            padding-block: 0.2rem;
            padding-inline: 0.8rem;
            border-radius: 0 0 1rem 1rem;
            color: var(--color-white);
            background-color: var(--color-warning);
            font-size: var(--font-label-small-size);
            font-weight: var(--font-label-small-m-weight);
            line-height: var(--font-label-small-line-height);
            letter-spacing: var(--font-label-small-letter-spacing);
          }

          .payment-period__header {
            display: flex;
            flex-direction: column;
            padding-bottom: var(--spacing-lg);
            margin-bottom: var(--spacing-md);
            border-bottom: 0.1rem solid var(--color-border-primary);

            .payment-period__header-title,
            .payment-period__header-text {
              font-size: var(--font-label-large-size);
              font-weight: var(--font-label-large-m-weight);
              line-height: var(--font-label-large-line-height);
              letter-spacing: var(--font-label-large-letter-spacing);
            }

            .payment-period__header-text {
              padding-top: var(--spacing-md);
              color: var(--color-green-100);
              font-weight: 700;
            }
          }
          .payment-period__list {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
            margin-top: var(--spacing-lg);
            font-size: var(--font-label-large-size);
            font-weight: var(--font-label-large-m-weight);
            line-height: var(--font-label-large-line-height);
            letter-spacing: var(--font-label-large-letter-spacing);

            .payment-period__list-section {
              display: grid;
              grid-template-columns: 5rem 1fr 6rem;
              font-weight: 700;

              .payment-period__list-month {
                color: var(--color-green-100);
              }

              .payment-period__list-cost {
                display: grid;
                align-items: center;
                grid-template-columns: 8rem 5.4rem 1fr;
              }

              .payment-period__list-cost--event {
                color: var(--color-warning);
                font-size: var(--font-body-large-size);
                font-weight: 700;
                line-height: var(--font-body-large-line-height);
                letter-spacing: var(--font-body-large-letter-spacing);
              }

              .payment-period__list-discount-label {
                color: var(--color-warning);
                font-size: var(--font-label-medium-size);
                font-weight: var(--font-label-medium-m-weight);
                line-height: var(--font-label-medium-line-height);
                letter-spacing: var(--font-label-medium-letter-spacing);
              }

              .payment-period__list-line-cost {
                padding-left: var(--spacing-md);
                font-size: var(--font-label-medium-size);
                color: var(--color-gray-400);
                text-decoration: line-through;
                font-weight: var(--font-label-large-m-weight);
              }

              .payment-period__list-btn {
                cursor: pointer;
                height: 2.4rem;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                border-radius: 1rem;
                background-color: var(--color-button-primary);
                font-size: var(--font-label-small-size);
                font-weight: var(--font-label-small-m-weight);
                line-height: var(--font-label-small-line-height);
                letter-spacing: var(--font-label-small-letter-spacing);
              }

			  &.is-event {
				.payment-period__list-btn {
				  background-color: var(--color-warning);
				}
			  }
            }
          }
        }

        .payment-period--hidden {
          display: none;
        }

        .payment__info {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: var(--spacing-xl);

          .payment__info-text {
            color: var(--color-gray-300);
            font-size: var(--font-label-small-size);
            font-weight: var(--font-label-small-weight);
            line-height: var(--font-label-small-line-height);
            letter-spacing: var(--font-label-small-letter-spacing);
          }
        }

        .payment-subscription__btn {
          cursor: pointer;
          width: 100%;
          text-align: center;
          padding-block: 1.2rem;
          margin-top: var(--spacing-xl);
          color: var(--color-white);
          background-color: var(--color-button-primary);
          font-size: var(--font-body-large-size);
          font-weight: var(--font-body-large-weight);
          line-height: var(--font-body-large-line-height);
          letter-spacing: var(--font-body-large-letter-spacing);
        }

        .payment-subscription__btn--hidden {
          display: none;
        }
      }
    }
  }

  @media (max-width: 400px) {
    .main {
      .payment {
        .payment__wrapper {
          .payment-period {
            .payment-period__list {
              .payment-period__list-section {
                grid-template-columns: 5rem 1fr;
                row-gap: var(--spacing-md);

                .payment-period__list-cost {
                  grid-template-columns: 8rem 4.8rem 1fr;
                }

                .payment-period__list-discount-label {
                  font-size: var(--font-label-small-size);
                  font-weight: var(--font-label-small-m-weight);
                  line-height: var(--font-label-small-line-height);
                  letter-spacing: var(--font-label-small-letter-spacing);
                }

                .payment-period__list-line-cost {
                  font-size: var(--font-label-small-size);
                  line-height: var(--font-label-small-line-height);
                  letter-spacing: var(--font-label-small-letter-spacing);
                }

                .payment-period__list-btn {
                  justify-self: flex-end;
                  max-width: 6rem;
                  width: 100%;
                  grid-column: 2;
                  grid-row: 2;
                }
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 640px) {
    .payment-header {
      .payment-header__wrapper {
        padding-inline: var(--spacing-lg);
      }
    }
  }

  @media (min-width: 640px) and (max-width: 1024px) {
    .payment-header {
      .payment-header__wrapper {
        padding-inline: var(--spacing-xl);
      }
    }
  }

  @media (min-width: 1024px) {
    .payment-header {
      .payment-header__wrapper {
        padding-inline: var(--spacing-2xl);
      }
    }
  }
}