@layer components {
  .superbreaker-panel__image {
    height: 20rem;
  }
  .superbreaker-panel__content {
    margin-top: -2.8rem;
    z-index: 1;
  }
  @media (min-width: 768px) {
    .superbreaker-panel__content {
      margin-top: -6.4rem;
    }
    .superbreaker-panel__image {
      height: 22.7rem;
    }
  }
  @media (min-width: 992px) {
    .superbreaker-panel__content {
      margin-top: -9.6rem;
    }
    .superbreaker-panel__image {
      height: 47.2rem;
    }
    .superbreaker-panel .config-text {
      padding: 0 2.8rem;
    }
  }
  @media (min-width: 1200px) {
    .superbreaker-panel .config-text {
      padding: 0 1.8rem;
    }
  }
  @media (min-width: 1400px) {
    .superbreaker-panel .config-text {
      padding: 0 2.2rem;
    }
  }
  .superbreaker-full-image {
    min-height: 23.2rem;
    height: 100%;
  }
  .superbreaker-full-image::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    top: 0;
    background: var(--ui-images-overlays-image-tint);
    z-index: 1;
  }
  .superbreaker-full-image__content {
    z-index: 2;
    flex: 1;
  }
  .superbreaker-full-image__image {
    min-height: 23.2rem;
    height: 100%;
  }
  .superbreaker-full-image__background {
    width: 100%;
    height: 100%;
    top: 0;
  }
  .superbreaker-full-image .config-text {
    z-index: 2;
    position: relative;
  }
  @media (min-width: 768px) {
    .superbreaker-full-image {
      min-height: 38.8rem;
      height: 100%;
    }
    .superbreaker-full-image__image {
      min-height: 38.8rem;
    }
  }
  @media (min-width: 992px) {
    .superbreaker-full-image {
      min-height: 54.8rem;
      height: 100%;
    }
    .superbreaker-full-image__image {
      min-height: 54.8rem;
    }
  }
  .superbreaker-fifty {
    min-height: 27rem;
  }
  .superbreaker-fifty__image {
    position: relative;
    width: 100%;
    height: 27rem;
    inset-inline-start: 0;
  }
  .superbreaker-fifty__content {
    padding: var(--md-1) 0;
  }
  @media (min-width: 768px) {
    .superbreaker-fifty {
      min-height: 40.4rem;
    }
    .superbreaker-fifty__image {
      position: absolute;
      width: 50%;
      height: 100%;
      inset-inline-start: 0;
    }
    .superbreaker-fifty__content {
      padding-inline: var(--md-1) 0;
      padding-top: var(--md-1);
      padding-bottom: var(--md-1);
    }
    .superbreaker-fifty--image-right .superbreaker-fifty__image {
      inset-inline: auto 0;
    }
    .superbreaker-fifty--image-right .superbreaker-fifty__content {
      padding-inline: 0 var(--md-1);
    }
  }
  @media (min-width: 992px) {
    .superbreaker-fifty {
      min-height: 60rem;
    }
  }
  .superbreaker-text-only__section {
    max-width: 100%;
    inset-inline: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
  }
  @media (min-width: 768px) {
    .superbreaker-text-only__section {
      max-width: calc(100% - 5.6rem);
    }
    .superbreaker-text-only__section-left {
      inset-inline-end: 5.6rem;
    }
    .superbreaker-text-only__section-right {
      inset-inline-start: 5.6rem;
    }
  }
  @media (min-width: 992px) {
    .superbreaker-text-only__section {
      max-width: calc(100% - 17.6rem);
    }
    .superbreaker-text-only__section-left {
      inset-inline-end: 17.6rem;
    }
    .superbreaker-text-only__section-right {
      inset-inline-start: 17.6rem;
    }
  }
  @media (min-width: 1400px) {
    .superbreaker-text-only__section {
      max-width: calc(153.6rem + (100% - 153.6rem) / 2 - 9.6rem - 3.2rem - 1.6rem);
    }
    .superbreaker-text-only__section-left {
      inset-inline-end: auto;
    }
    .superbreaker-text-only__section-right {
      inset-inline-start: auto;
    }
  }
}


.superbreaker-panel__image {object-position: top;}