/* ============================================================
   PUSK HERO V1
   Selected transparent artwork.
   Same desktop stage as Header.
   Mobile uses CSS crops of the same original PNG.
   ============================================================ */

.pusk-hero-v1 {
  position: relative;

  z-index: 5;

  padding:
    0
    0
    clamp(44px, 4vw, 82px);
}

.pusk-hero-visually-hidden-v1 {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);

  white-space: nowrap;

  border: 0;
}

.pusk-hero-stage-v1 {
  width: min(94vw, 3360px);

  margin-inline: auto;
}

.pusk-hero-desktop-v1 {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;

  object-fit: contain;

  user-select: none;
  -webkit-user-drag: none;

  filter:
    drop-shadow(
      0 18px 34px
      rgba(0, 0, 0, .24)
    );
}

.pusk-hero-mobile-v1 {
  display: none;
}

@media (max-width: 1320px) {

  .pusk-hero-stage-v1 {
    width: min(96vw, 3360px);
  }

}

@media (max-width: 760px) {

  .pusk-hero-v1 {
    padding:
      0
      0
      30px;
  }

  .pusk-hero-stage-v1 {
    width: calc(100% - 20px);
  }

  .pusk-hero-desktop-v1 {
    display: none;
  }

  .pusk-hero-mobile-v1 {
    width: 100%;

    display: grid;

    grid-template-columns:
      1fr;

    gap: 2px;
  }

  .pusk-hero-mobile-copy-v1 {
    position: relative;

    width: 100%;
    height: 210px;

    overflow: hidden;
  }

  .pusk-hero-mobile-copy-v1 img {
    position: absolute;

    top: 0;
    left: 0;

    width: 218%;
    max-width: none;
    height: auto;

    transform:
      translate(
        -1.5%,
        -20%
      );

    transform-origin:
      left top;

    user-select: none;
    -webkit-user-drag: none;
  }

  .pusk-hero-mobile-art-v1 {
    position: relative;

    width: 100%;
    height: 290px;

    overflow: hidden;
  }

  .pusk-hero-mobile-art-v1 img {
    position: absolute;

    top: 0;
    left: 0;

    width: 176%;
    max-width: none;
    height: auto;

    transform:
      translateX(-38.5%);

    transform-origin:
      left top;

    user-select: none;
    -webkit-user-drag: none;
  }

}

@media (max-width: 410px) {

  .pusk-hero-mobile-copy-v1 {
    height: 202px;
  }

  .pusk-hero-mobile-copy-v1 img {
    width: 222%;

    transform:
      translate(
        -1.5%,
        -20%
      );
  }

  .pusk-hero-mobile-art-v1 {
    height: 278px;
  }

  .pusk-hero-mobile-art-v1 img {
    width: 180%;

    transform:
      translateX(-39%);
  }

}