.price {
  margin: 100px 0;

  @include tablet {
    margin: 90px 0;
  }

  &__title {
    margin: 21px 0 24px;

    @include tablet {
      margin: 18px 0 37px;
    }
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 46px;

    @include laptop {
      gap: 30px 24px;
    }

    &-item {
      flex: 0 0 calc(50% - 46px / 2);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 35px 35px 40px;
      box-sizing: border-box;
      color: $black;
      border-radius: 8px 30px;
      background-color: $white;

      @include laptop {
        flex: 0 0 calc(50% - 24px / 2);
        border-radius: 8px 30px;
      }

      @include tablet {
        flex: 1 1 100%;
      }

      &--active {
        color: $white;
        background-color: $blue;

        & > * {
          border-color: rgba($color: $white, $alpha: 0.1);
        }
      }

      & > * {
        max-width: 410px;
        width: 100%;
        box-sizing: border-box;
      }

      &-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin: 0 0 12px;
        font-weight: 400;
        font-size: 17px;
        line-height: 122%;
        text-align: center;

        @include tablet {
          font-size: 16px;
        }

        &::before {
          content: '';
          display: block;
          border-radius: 100px;
          width: 12px;
          height: 12px;
          background-color: $blue;
        }
      }

      &--active &-info::before {
        background-color: $white;
      }

      &-title {
        padding: 0 0 23px;
        margin: 0;
        font-weight: 600;
        font-size: 33px;
        line-height: 129%;
        letter-spacing: 0.01em;
        text-align: center;
        border-bottom: 1px solid rgba($color: $black, $alpha: 0.2);

        @include tablet {
          padding: 0 0 19px;
          font-size: 26px;
        }
      }

      &-time {
        padding: 21px 0;
        font-weight: 500;
        font-size: 25px;
        line-height: 129%;
        letter-spacing: 0.01em;
        text-align: center;
        border-bottom: 1px solid rgba($color: $black, $alpha: 0.2);

        @include tablet {
          padding: 19px 0;
          font-size: 23px;
        }
      }

      &-description {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px 0;
        font-weight: 500;
        font-size: 17px;
        line-height: 132%;
        text-align: center;
        border-bottom: 1px solid rgba($color: $black, $alpha: 0.2);

        @include tablet {
          padding: 19px 0;
          font-size: 16px;
        }
      }

      &-price {
        padding: 24px 0 31px;
        font-weight: 600;
        font-size: 33px;
        line-height: 129%;
        letter-spacing: 0.01em;
        text-align: center;

        @include tablet {
          padding: 18px 0 22px;
          font-size: 28px;
        }
      }

      &-buttons {
        display: flex;
        justify-content: center;
      }

      &--active &-title,
      &--active &-time,
      &--active &-description {
        border-color: rgba($color: $white, $alpha: 0.2);
      }
    }
  }
}