:root {
  --about-mid-banner-offset: 5.25rem;
}

@media (min-width: 750px) and (max-width: 1024px) {
  :root {
    --about-mid-banner-offset: 3.25rem;
  }
}

.shopify-section:has(.about-mid-banner__pre-sibling) {
  &+.shopify-section {
    margin-block-start: 0;
  }

  .section {
    background-color: rgb(from var(--color-background) r g b / 0.8);
    z-index: 2;
  }
}

.about-mid-banner__pre-sibling {
  .custom-section-content {
    .section-content-wrapper {
      padding-block-end: calc(var(--padding-block-end) + var(--about-mid-banner-offset));
    }
  }
}

.shopify-section:has(.about-mid-banner) {
  z-index: 1;
}

.about-mid-banner {
  svg {
    width: 100%;
    height: auto;
  }

  .custom-section-content {
    transform: translate3d(0, calc(var(--about-mid-banner-offset) * -1), 0);

    @media (min-width: 750px) {
      margin: 0 auto;
      max-width: 74rem;
    }
  }
}