/* RentGuarantor CSS: content-payment-types.css (source: src/assets/scss/_content-payment-types.scss) */
/**
 * Content Payment Types Organism
 * Payment installment options with provider logos
 * Three color variants: white, blue, and grey
 */
.content-payment-types {
  padding: var(--spacing-1300) 0;
}
@media (max-width: 991.98px) {
  .content-payment-types {
    padding: var(--spacing-1100) 0;
  }
}
.content-payment-types[data-variant=white] {
  background-color: var(--surface-general-primary);
}
.content-payment-types[data-variant=blue] {
  background-color: var(--color-light-blue-50);
}
.content-payment-types[data-variant=grey] {
  background-color: var(--surface-general-fifth);
}
.content-payment-types__container {
  display: flex;
  gap: var(--spacing-700);
  align-items: flex-start;
}
.content-payment-types__info {
  width: 371px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 298px;
}
.content-payment-types__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xxl);
  letter-spacing: -1.04px;
  color: var(--bs-primary);
  margin-bottom: 0;
}
.content-payment-types__options {
  flex: 1;
  display: flex;
  gap: var(--spacing-700);
  height: 298px;
}
.content-payment-types__option {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--spacing-800);
  border-radius: 20px;
  background-color: var(--surface-general-fifth);
}
[data-variant=blue] .content-payment-types__option, [data-variant=grey] .content-payment-types__option {
  background-color: var(--surface-general-primary);
}
.content-payment-types__option-logo {
  margin-bottom: var(--spacing-800);
}
.content-payment-types__option-logo img {
  max-width: 200px;
  height: 55px;
  display: block;
}
.content-payment-types__option-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-800);
}
.content-payment-types__option-title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-l);
  letter-spacing: -0.64px;
  color: var(--bs-primary);
  margin-bottom: 0;
}
.content-payment-types__option-text {
  font-family: var(--font-family-bodycopy);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xxs);
  color: var(--color-core-black);
  margin-bottom: 0;
}
@media (max-width: 1199.98px) {
  .content-payment-types__container {
    padding: 0 var(--spacing-1200);
  }
  .content-payment-types__info {
    width: 300px;
  }
}
@media (max-width: 991.98px) {
  .content-payment-types__container {
    flex-direction: column;
    padding: 0 var(--spacing-1000);
  }
  .content-payment-types__info {
    width: 100%;
    min-height: auto;
    gap: var(--spacing-1000);
    margin-bottom: var(--spacing-1000);
  }
  .content-payment-types__options {
    width: 100%;
    height: auto;
  }
  .content-payment-types__heading {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }
}
@media (max-width: 767.98px) {
  .content-payment-types__options {
    flex-direction: column;
    gap: var(--spacing-1000);
  }
  .content-payment-types__option {
    min-height: 250px;
  }
  .content-payment-types__option-title {
    font-size: var(--font-size-m);
    line-height: var(--line-height-m);
  }
  .content-payment-types__option-text {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
  }
}