.Card.paywall {
  width: 348px;
  border-radius: 4px;
  font-family: Fira Sans, Arial, sans-serif;

  & .Card-content {
    padding: 0;
  }

  @media (max-width: 768px) {
    width: 320px;
    margin: 0 auto;
  }
}

.Card.paywall--bc {
  width: 320px;
}

.paywall-view {
  display: flex;
  flex-direction: column;
  position: relative;
  color: var(--color-neutral-text);
  padding: var(--space-5x) var(--space-3x) var(--space-3x);

  @media (max-width: 768px) {
    padding: var(--space-5x) 14px 14px;
    width: 320px;
  }
}

.paywall-view--thin {
  padding-left: var(--space-2x);
  padding-right: var(--space-2x);
  padding-bottom: var(--space-2x);
}

.paywall-view_close-icon {
  position: absolute;
  cursor: pointer;
  right: 14px;
  top: 20px;

  @media (max-width: 768px) {
    right: 14px;
    top: 14px;
  }
}

.paywall-view_title {
  padding: 0;
  font-size: var(--font-size-x-large);
  text-align: center;
  font-weight: var(--font-weight-medium);
}

.paywall-view_info {
  font-size: var(--font-size);
  line-height: 24px;
  text-align: center;

  & .Link {
    font-weight: var(--font-weight-light);
    text-decoration: underline;
  }
}

.paywall-view_start-btn {
  max-width: initial;
  width: initial;
  align-self: center;
  font-size: var(--font-size);
}

.paywall-view_description {
  border: 2px solid var(--color-brand-500);
  border-radius: 4px;
  padding: var(--space-3x) var(--space-3x) var(--space-2x) var(--space-3x);

  @media (max-width: 768px) {
    padding: var(--space-2x);
  }
}

.paywall-view_label {
  font-size: var(--font-size-x-large);
  font-weight: var(--font-weight-medium);
  padding: 0;
}

.paywall-view_plan {
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.paywall-view_price {
  color: rgb(106, 118, 133);
  font-size: var(--font-size-tiny);
  display: flex;
  align-items: center;
}

.paywall-view_price-value {
  color: var(--color-neutral-text);
  font-size: var(--font-size-display-medium);
}

.paywall-view_benefits {
  margin: 0 0 var(--space-2x) 0;
  list-style: none;
  padding: 0;

  @media (max-width: 768px) {
    margin-bottom: var(--space);
  }
}

.paywall-view_benefit {
  display: flex;

  &:not(:last-child) {
    margin-bottom: var(--space-2x);

    @media (max-width: 768px) {
      margin-bottom: var(--space);
    }
  }

  &--highlight {
    font-weight: var(--font-weight-bold);
  }
}

.paywall-view_benefit-icon {
  flex-shrink: 0;
  margin-right: var(--space);
  color: var(--color-green-600);
}

.paywall-view_benefit-content {
  font-size: var(--font-size);
}

.paywall-view_link  {
  display: block;
  margin: 0 auto;
  min-width: 165px;
}

.paywall-view_benefit-link {
  padding: 0;
  width: initial;
  max-width: initial;
  min-height: initial;
}

.paywall-view_features-title {
  font-size: var(--font-size);
  font-weight: var(--font-weight-medium);
  word-break: break-word;
}

.paywall-view_more-btn {
  align-self: center;
  display: block;
  margin: 0 auto;
}