@scope (.mrkt-hero) {
  /* Reset Elementor Defaults */
  :scope .e-div-block-base,
  .elementor :scope {
    padding: 0;
    min-width: 0;
    min-height: 0;
  }

  :scope {
    /* Layout */
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    height: calc(100svh - var(--mrkt-header-height));
    min-height: 34rem;
  }

  .copy {
    /* Positioning */
    position: relative;
    isolation: isolate;

    /* Layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--mrkt-space-M);
    padding-block: var(--mrkt-space-L);
    padding-inline: var(--mrkt-section-padding-inline) var(--mrkt-space-L);
  }

  /* Fade the construction grid out towards the image */
  .copy::after {
    /* Positioning */
    position: absolute;
    inset: 0;
    z-index: -1;

    /* Layout */
    content: "";

    /* Style */
    background: linear-gradient(90deg, transparent 40%, var(--mrkt-color-background));
  }

  .copy > * {
    /* Positioning */
    position: relative;
  }

  .label {
    /* Style */
    color: var(--mrkt-color-primary);
  }

  .title {
    /* Style */
    color: var(--mrkt-color-accent-950);
  }

  /* The claim divider from the client's PDF: "BLEIBT | VERBUNDEN." */
  .bar {
    /* Layout */
    display: inline-block;
    width: 0.12em;
    height: 0.82em;
    margin-inline-start: 0.22em;
    vertical-align: -0.04em;

    /* Style */
    background: var(--mrkt-color-secondary);
    transform-origin: bottom;

    /* Transitions */
    animation: bar-in 700ms var(--mrkt-transition-curve) 250ms both;
  }

  .lead {
    /* Layout */
    max-width: 40ch;

    /* Style */
    color: var(--mrkt-color-text-muted);
  }

  .ctas {
    /* Layout */
    display: flex;
    flex-wrap: wrap;
    gap: var(--mrkt-space-S);
    margin-top: var(--mrkt-space-XS);
  }

  .media {
    /* Positioning */
    position: relative;

    /* Layout */
    overflow: hidden;

    /* Style */
    background: var(--mrkt-color-accent-200);
  }

  .media img {
    /* Positioning */
    position: absolute;
    inset: 0;

    /* Layout */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;

    /* Transitions */
    animation: img-in 1200ms var(--mrkt-transition-curve) both;
  }

  .callout {
    /* Positioning */
    position: absolute;
    top: 42%;
    left: 8%;

    /* Layout */
    display: flex;
    align-items: center;
    gap: var(--mrkt-space-XS);
    padding: 0.5rem 0.75rem;

    /* Font */
    font-size: 0.75rem;

    /* Style */
    background: oklch(from var(--mrkt-color-white) l c h / 0.88);
    backdrop-filter: blur(6px);
    color: var(--mrkt-color-accent-800);

    /* Transitions */
    animation: fade-up 600ms var(--mrkt-transition-curve) 900ms both;
  }

  .dot {
    /* Layout */
    width: 0.5rem;
    height: 0.5rem;

    /* Style */
    border-radius: var(--mrkt-border-radius-full);
    background: var(--mrkt-color-secondary);
    box-shadow: 0 0 0 4px var(--mrkt-color-secondary-a20);
  }

  .tag {
    /* Positioning */
    position: absolute;
    right: 0;
    bottom: 0;

    /* Layout */
    padding: 0.625rem 1rem;

    /* Font */
    font-size: 0.75rem;
    letter-spacing: 0.04em;

    /* Style */
    background: var(--mrkt-color-primary);
    color: var(--mrkt-color-white);
  }

  @keyframes bar-in {
    from { transform: scaleY(0); }
  }

  @keyframes img-in {
    from { transform: scale(1.06); opacity: 0; }
  }

  @keyframes fade-up {
    from { transform: translateY(0.5rem); opacity: 0; }
  }

  @media (width < 900px) {
    :scope {
      /* Layout */
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      height: auto;
      min-height: calc(100svh - var(--mrkt-header-height));
    }

    .copy {
      /* Layout */
      padding-block: var(--mrkt-space-L);
      padding-inline: var(--mrkt-section-padding-inline);
    }

    .media {
      /* Layout */
      min-height: 14rem;
    }
  }
}