.donar__wrapper {
  --donar-background-color: var(--c-lightpeach);
  --donar-margin-inline: calc(var(--wrapper-padding-inline) * -1);
  --donar-width: 100dvw;
  --donar-list-columns: 2;
  --donar-trigger-color: var(--c-crimson);
  --donar-trigger-background: var(--c-white);
  --donar-trigger-border-color: var(--c-crimson);
  --donar-trigger-width: 140px;
}
@media (min-width: 768px) {
  .donar__wrapper {
    --donar-margin-inline: 0;
    --donar-width: auto;
    --donar-list-columns: 4;
    --donar-trigger-width: 180px;
  }
}
.donar__wrapper {
  margin-inline: var(--donar-margin-inline);
  width: var(--donar-width);
}
.donar__wrapper .donar__list {
  display: grid;
  grid-template-columns: repeat(var(--donar-list-columns), var(--donar-trigger-width));
  justify-content: center;
  gap: 10px;
  font-family: var(--ff-alternative);
  background: linear-gradient(180deg, transparent 50%, var(--donar-background-color) 50%);
  padding-block: 3em;
}
.donar__wrapper .donar__trigger {
  color: var(--donar-trigger-color);
  background: var(--donar-trigger-background);
  border: 2px solid;
  border-color: var(--donar-trigger-border-color);
  border-radius: calc(infinity * 1px);
  text-transform: uppercase;
  cursor: pointer;
  width: var(--donar-trigger-width);
  aspect-ratio: 1/1;
  font-weight: 700;
}
.donar__wrapper .donar__trigger[data-state=active] {
  --donar-trigger-color: var(--c-white);
  --donar-trigger-background: var(--c-crimson);
  --donar-trigger-border-color: var(--c-crimson);
}
.donar__wrapper .donar__content {
  background: var(--donar-background-color);
  padding: 2em 72px 72px;
}
.donar__wrapper .donar__content form {
  --item-text-align: center;
  --item-max-width: 460px;
  --input-text-align: center;
  --submit-margin-y: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin: 0 auto;
}
.donar__wrapper .donar__aviso {
  text-align: center;
  margin-block-start: 2rem;
}
.donar__wrapper .donar__aviso .donar__aviso-title {
  font-weight: var(--fw-bold);
}
.donar__wrapper .donar__aviso .donar__aviso-text {
  font-style: italic;
}
.donar__wrapper .cee-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.donar__wrapper .cee-form p {
  color: var(--c-black);
  font-size: 16px;
  letter-spacing: -0.92px;
  line-height: 23px;
  text-align: center;
  max-width: 624px;
}
.donar__wrapper .cee-form .cee-form__cta {
  margin-top: 50px;
}