:root {
  --accordion-breaker-background-color: var(--color-cyan-light);

  @include use-responsive-sizing(--accordion-breaker-columns, (xs: 1, l: 2));
}

.accordion-breaker {
  background-color: var(--accordion-breaker-background-color);

  @include use-responsive-sizing(padding-block, responsive-map(xs 2rem, xl 6rem));
}

.accordion-breaker__inner {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(var(--accordion-breaker-columns), minmax(0, 1fr));

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

.accordion-breaker__content {
  display: flex;
  flex-direction: column;

  @include use-responsive-sizing(gap, responsive-map(xs 2rem, xl 4.2rem));

  @include mq($until: l) {
    text-align: center;
  }
}

.accordion-breaker__accordions {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: start;
}

.accordion-breaker__accordion {
  --accordion-background-color: var(--color-white);
}

.accordion-breaker__image {
  @include mq($until: l) {
    display: none;
  }
}