:root {
  --contact-teaser-background-color: var(--color-cyan-light);
  --contact-teaser-link-columns: 1;
}

.contact-teaser {
  background-color: var(--contact-teaser-background-color);
  display: grid;
  grid-auto-columns: 100%;
  grid-template-rows: min-content auto;
}

.contact-teaser__image {
  position: relative;
}

.contact-teaser__social-links {
  --icon-button-size: 5rem;
  --icon-button-icon-size: 2.5rem;

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
}

.contact-teaser__image .contact-teaser__social-links {
  --icon-button-background-color: var(--contact-teaser-background-color);
  --icon-button-border-color: var(--contact-teaser-background-color);
  --icon-button-border-color-active: var(--color-white);

  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  justify-content: flex-end;
  padding: 0;
  position: absolute;
  z-index: 2;
}

.contact-teaser__content {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  padding: 3rem;
}

.contact-teaser__headline {
  margin-block-end: auto;
}

.contact-teaser__text {
  font-size: 1.6rem;
  line-height: var(--line-height-body);

  > * + * {
    margin-block-start: 1.5rem;
  }
}

.contact-teaser__links {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(var(--contact-teaser-link-columns), minmax(0, 1fr));
  list-style: none;
}

.contact-teaser__link {
  --icon-button-background-color: var(--color-white);
  --icon-button-border-color: var(--color-white);
  --icon-button-background-color-active: var(--color-orange);
  --icon-button-icon-size: 2rem;
  --icon-button-size: 5rem;
  --icon-button-text-size: 1.6rem;

  display: block;
}

@include mq($from: m) {
  .contact-teaser--horizontal {
    --contact-teaser-link-columns: 2;

    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-rows: auto;

    .contact-teaser__social-links {
      inset-block-end: 3rem;
      inset-inline-end: 3rem;
    }

    .contact-teaser__image + .contact-teaser__content {
      --contact-teaser-link-columns: 1;
    }
  }
}