/* Keep the store hero title on the same desktop content grid as the other page banners. */
@media (min-width: 821px) {
  body.filename_store {
    --store-hero-content-width: 1190px;
    --store-hero-gutter: max(24px, calc((100vw - var(--store-hero-content-width)) / 2));
  }

  body.filename_store .store-hero__content {
    top: 53%;
    left: var(--store-hero-gutter);
    width: min(680px, 48%);
    max-width: 680px;
    min-width: 0;
    transform: translateY(-50%);
    text-align: left;
    padding: 22px 28px 26px 0;
  }

  body.filename_store .store-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 57%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.8) 68%, rgba(255, 255, 255, 0) 100%);
  }

  body.filename_store .store-hero h1 {
    margin: 0;
    font-size: clamp(52px, 4.2vw, 68px);
    line-height: 1.18;
    white-space: normal;
  }

  body.filename_store .store-hero__subtitle {
    margin: 12px 0 0;
    white-space: nowrap;
  }

  body.filename_store .store-hero__benefits {
    position: relative;
    z-index: 2;
    gap: 28px 42px;
  }
}

@media (min-width: 601px) and (max-width: 820px) {
  body.filename_store .store-hero__content {
    left: 7%;
    width: 52%;
    max-width: 52%;
  }
}