.community-breaker {
  --community-teaser-badge-offset-factor: 2.2;
  --community-breaker-call-to-action-icon-size: 7.4rem;
  --community-breaker-call-to-action-padding: 4rem;

  background-color: var(--community-breaker-background-color, var(--color-cyan-light));

  @include use-responsive-sizing(--community-breaker-padding-block, responsive-map(xs 4rem, xl 6rem));
  @include use-responsive-sizing(--community-teaser-badge-size, responsive-map(xs 5rem, xl 7.5rem));
}

.community-breaker__inner {
  padding-block: var(--community-breaker-padding-block);
  position: relative;

  @include use-container();
}

.community-breaker__headline {
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.04em;
  line-height: var(--line-height-small);
  margin-block-end: 2rem;
  position: relative;
  z-index: 2;

  @include use-responsive-sizing(font-size, responsive-map(xs 2.6rem, xl 3.6rem));
}

.community-breaker__headline-icon {
  color: var(--color-orange);
  font-size: 5.3rem;
  margin-inline-start: 1rem;
  vertical-align: -2.4rem;
  white-space: nowrap;

  @include mq($from: l) {
    font-size: 7.2rem;
    vertical-align: -3.2rem;
  }
}

.community-breaker__headline-icon-inner {
  position: relative;
  rotate: -105deg;
}

.community-breaker__teasers {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  margin-inline: calc(var(--inner-container-padding) * -1);
  overflow-x: hidden;
  position: relative;
  row-gap: 2rem;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  z-index: 2;

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

  @include mq($from: m) {
    flex-wrap: nowrap;
    margin-inline: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }
}

.community-breaker__teaser,
.community-breaker__call-to-action {
  @include use-responsive-sizing(--community-breaker-teaser-width, (
    xs: 100%,
    m: column-width(m, 6),
    l: column-width(l, 4),
    xl: column-width(xl, 4),
  ));
}

.community-breaker__teaser {
  display: flex;
  flex-shrink: 0;
  inline-size: var(--community-breaker-teaser-width);
  padding-inline: var(--inner-container-padding);
  position: relative;
  scroll-snap-align: start;
  z-index: 2;

  @include mq($from: m) {
    padding-inline: 0;
  }
}

.community-breaker__call-to-action {
  --community-breaker-call-to-action-offset: calc(var(--community-teaser-badge-size) / var(--community-teaser-badge-offset-factor));

  align-items: center;
  background-color: var(--color-midnight);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1.5rem;
  inline-size: var(--community-breaker-teaser-width);
  inset-block-end: 0;
  inset-inline: auto;
  justify-content: center;
  padding: var(--community-breaker-call-to-action-padding);
  position: sticky;
  scroll-snap-align: start;
  text-align: center;
  z-index: 3;

  @include mq($from: m) {
    border-block-start-color: var(--community-breaker-background-color, var(--color-cyan-light));
    border-block-start-style: solid;
    border-block-start-width: var(--community-breaker-call-to-action-offset);
    inline-size: calc(var(--community-breaker-teaser-width) + 1px);
    inset-block: auto;
    inset-inline-end: 1px;
    inset-inline-start: auto;
    margin-inline-start: auto;
  }
}

.community-breaker__call-to-action-icon {
  color: var(--color-orange);
  display: flex;
  font-size: var(--community-breaker-call-to-action-icon-size);
  line-height: 0;
  margin-block-end: 1rem;
  margin-block-start: calc(var(--community-breaker-call-to-action-offset) * -1 - var(--community-breaker-call-to-action-padding));
  rotate: 13deg;
}

.community-breaker__call-to-action-button {
  margin-block-start: 1rem;
}

.community-breaker__call-to-action-text {
  font-size: 1.6rem;
  line-height: var(--line-height-body);
}

.community-breaker__buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  row-gap: 3rem;
  z-index: 2;

  @include mq($from: m) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.community-breaker__navigation-buttons {
  display: flex;
  flex-shrink: 0;
  gap: 2rem;
  margin-block-start: 4rem;
  margin-inline-start: auto;

  @include mq($until: m) {
    display: none;
  }
}

.community-breaker__button {
  margin-block-start: 4rem;
}