:root {
  --social-media-links-text-align: center;
  --social-media-links-links-align: center;
  --social-media-links-icon-button-background-color: transparent;
  --social-media-links-icon-button-background-color-active: var(--color-orange);

  @include use-responsive-sizing(--social-media-links-icon-button-size, responsive-map(xs 6.2rem, xl 8rem));
  @include use-responsive-sizing(--social-media-links-gap, responsive-map(xs 2rem, xl 3rem));
}

.social-media-links__headline {
  margin-block-end: calc(var(--social-media-links-gap) * 1.5);
  text-align: var(--social-media-links-text-align);
}

.social-media-links__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--social-media-links-gap);
  justify-content: var(--social-media-links-links-align);
}

.social-media-links__link {
  --icon-button-background-color: var(--social-media-links-icon-button-background-color);
  --icon-button-background-color-active: var(--social-media-links-icon-button-background-color-active);
  --icon-button-size: var(--social-media-links-icon-button-size);
  --icon-button-icon-size: 0.5em;

  display: block;
}