@use "../../tokens/color" as *;
@use "../../tokens/font" as *;
@use "../../base/mixins";
@use "../../tokens/screens" as *;

.iati-newsletter-form {
  color: #fff;
  display: grid;
  gap: 1rem;
  min-width: min(31.25rem, calc(100vw - 2rem));
  @media (min-width: $screen-md) {
    grid-template-columns: max-content 1fr;
  }
}

.iati-newsletter-form__item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: end;
  gap: 0.2rem;
  @media (min-width: $screen-md) {
    gap: 1rem;
  }
}

.iati-newsletter-form__label {
  font-weight: 600;
  grid-column: 1;
  @media (min-width: $screen-md) {
    text-align: end;
  }
}

.iati-newsletter-form__input {
  max-width: 100%;
  border: none;
  background-color: #fff;
  padding: 0.5em 1em;
}

.iati-newsletter-form__submit {
  grid-column: -1 / span 1;
}