@layer ds_components {
  .comp-hero {
    --shift-inline: var(--ds-component-hero-translate-inline);
    --shift-block: var(--ds-component-hero-translate-block);
    --step: var(--ds-component-hero-rotation-step);
    --hero-aspect-ratio: 3;
    --hero-max-rotation: calc(var(--step) * 4);
    --hero-rotation-overhang: calc(
      (40cqi * sin(var(--hero-max-rotation))) -
        (
          (40cqi / var(--hero-aspect-ratio)) *
            (1 - cos(var(--hero-max-rotation)))
        )
    );
    --hero-decoration-overhang: calc(
      var(--shift-block) + var(--hero-rotation-overhang)
    );
    --hero-decoration-safe-gap: 0.5rem;
    position: relative;
    container-type: inline-size;
    padding-block-end: max(
      calc(
        var(--hero-decoration-overhang) -
          var(--ds-component-hero-margin-block-end) +
          var(--hero-decoration-safe-gap)
      ),
      calc(var(--shift-block) + 0.75rem)
    );
    overflow: hidden;
    transform: translateY(-1px);

    .is-wrapper {
      position: relative;
      z-index: 2;
      margin-block-end: var(--ds-component-hero-margin-block-end);
      /* margin-block-start: calc(var(--ds-component-hero-radius) * -1); */
      aspect-ratio: 3/1;
      background-color: var(--ds-component-hero-color-background-loading);
      border-end-start-radius: var(--ds-component-hero-radius);
      border-end-end-radius: var(--ds-component-hero-radius);

      outline: var(--ds-semantic-ui-outline-width-bold) solid
        var(--ds-skin-background);

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--ds-component-hero-color-accent-primary);
        border-radius: var(--ds-component-hero-radius);
        rotate: calc(var(--step) * 2);
        transform: translate(
          calc(var(--shift-inline) * -2),
          var(--shift-block)
        );
        z-index: -1;
      }

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--ds-component-hero-color-accent-secondary);
        border-radius: var(--ds-component-hero-radius);
        rotate: calc(var(--step) * 4);
        z-index: -2;
        transform: translate(
          calc(var(--shift-inline) * -3),
          var(--shift-block)
        );
      }

      picture {
        position: relative;
        z-index: 5;
        background-color: var(--ds-component-hero-color-background-loading);
        border-end-start-radius: var(--ds-component-hero-radius);
        border-end-end-radius: var(--ds-component-hero-radius);

        img {
          border-end-start-radius: var(--ds-component-hero-radius);
          border-end-end-radius: var(--ds-component-hero-radius);
          position: relative;
          z-index: 5;
        }
      }
    }
  }
}