:root {
  @include use-responsive-sizing(--contact-teaser-grid-columns, (xs: 1, m: 2));
}

.contact-teaser-grid__headline {
  margin-block-end: 3rem;
  text-align: center;
}

.contact-teaser-grid__contact-teasers {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(var(--contact-teaser-grid-columns), minmax(0, 1fr));

  @include use-responsive-sizing(gap, $gaps);
}

.contact-teaser-grid__contact-teaser {
  display: grid;
  grid-template-columns: 100%;
}

.contact-teaser-grid__contact-teaser:only-child {
  grid-column-end: calc(var(--contact-teaser-grid-columns) + 1);
  grid-column-start: 1;
}

.contact-teaser-grid__more-teaser {
  --icon-button-line-height: var(--line-height-body);

  align-items: center;
  background-color: var(--contact-teaser-background-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
  position: relative;
}