newsletter.pcss

.newsletter-grid {
  @apply grid;

  gap: 1rem;

  grid-template-areas:
  "icon-area additional-text"
  "main-text main-text"
  "input-area input-area";

  @screen xl {
    grid-template-areas:
    "icon-area main-text"
    "additional-text input-area";
  }
}

.newsletter-grid__icon {
  grid-area: icon-area;
  max-width: 10rem;
}

.newsletter-grid__additional-text {
  grid-area: additional-text;
  align-self: center;
  max-width: 33rem;

  @screen xl {
    align-self: start;
    max-width: 10rem;
  }
}

.newsletter-grid__main-text {
  grid-area: main-text;
  max-width: 33rem;
}

.newsletter-grid__input {
  grid-area: input-area;
}