/* Keep Template 2's three-scene composition inside compact and medium landscape heroes. */
@media (min-width: 1367px) and (orientation: landscape) {
  body.catalog-template--template_2 .tpl1-hero__visual {
    --tpl2-layer-background-offset-x: var(--tpl2-layer-background-desktop-offset-x, var(--tpl2-layer-background-offset-x-custom, 0rem));
    --tpl2-layer-background-offset-y: var(--tpl2-layer-background-desktop-offset-y, var(--tpl2-layer-background-offset-y-custom, 0rem));
    --tpl2-layer-middle-offset-x: var(--tpl2-layer-middle-desktop-offset-x, var(--tpl2-layer-middle-offset-x-custom, 0%));
    --tpl2-layer-middle-offset-y: var(--tpl2-layer-middle-desktop-offset-y, var(--tpl2-layer-middle-offset-y-custom, 0px));
    --tpl2-layer-front-offset-x: var(--tpl2-layer-front-desktop-offset-x, var(--tpl2-layer-front-offset-x-custom, 0rem));
    --tpl2-layer-front-offset-y: var(--tpl2-layer-front-desktop-offset-y, var(--tpl2-layer-front-offset-y-custom, 0rem));
  }
  body.catalog-template--template_2 .tpl2-scene-layer--background { scale: var(--tpl2-layer-background-desktop-scale-x, var(--tpl2-layer-background-desktop-scale, 1)) var(--tpl2-layer-background-desktop-scale-y, var(--tpl2-layer-background-desktop-scale, 1)); }
  body.catalog-template--template_2 .tpl2-scene-layer--middle { scale: var(--tpl2-layer-middle-desktop-scale-x, var(--tpl2-layer-middle-desktop-scale, 1)) var(--tpl2-layer-middle-desktop-scale-y, var(--tpl2-layer-middle-desktop-scale, 1)); }
  body.catalog-template--template_2 .tpl2-scene-layer--front { scale: var(--tpl2-layer-front-desktop-scale-x, var(--tpl2-layer-front-desktop-scale, 1)) var(--tpl2-layer-front-desktop-scale-y, var(--tpl2-layer-front-desktop-scale, 1)); }
}

@media (min-width: 560px) and (max-width: 1366px) and (max-height: 900px) and (orientation: landscape) {
  body.catalog-template--template_2 .tpl1-hero__visual {
    --tpl2-layer-background-offset-x: var(--tpl2-layer-background-mobile-landscape-offset-x, var(--tpl2-layer-background-offset-x-custom, 0rem));
    --tpl2-layer-background-offset-y: var(--tpl2-layer-background-mobile-landscape-offset-y, var(--tpl2-layer-background-offset-y-custom, 0rem));
    --tpl2-layer-middle-offset-x: var(--tpl2-layer-middle-mobile-landscape-offset-x, var(--tpl2-layer-middle-offset-x-custom, 0%));
    --tpl2-layer-middle-offset-y: var(--tpl2-layer-middle-mobile-landscape-offset-y, var(--tpl2-layer-middle-offset-y-custom, 0px));
    --tpl2-layer-front-offset-x: var(--tpl2-layer-front-mobile-landscape-offset-x, var(--tpl2-layer-front-offset-x-custom, 0rem));
    --tpl2-layer-front-offset-y: var(--tpl2-layer-front-mobile-landscape-offset-y, var(--tpl2-layer-front-offset-y-custom, 0rem));
  }
  body.catalog-template--template_2 .tpl2-scene-layer--background { scale: var(--tpl2-layer-background-mobile-landscape-scale-x, var(--tpl2-layer-background-mobile-landscape-scale, 1)) var(--tpl2-layer-background-mobile-landscape-scale-y, var(--tpl2-layer-background-mobile-landscape-scale, 1)); }
  body.catalog-template--template_2 .tpl2-scene-layer--middle { scale: var(--tpl2-layer-middle-mobile-landscape-scale-x, var(--tpl2-layer-middle-mobile-landscape-scale, 1)) var(--tpl2-layer-middle-mobile-landscape-scale-y, var(--tpl2-layer-middle-mobile-landscape-scale, 1)); }
  body.catalog-template--template_2 .tpl2-scene-layer--front { scale: var(--tpl2-layer-front-mobile-landscape-scale-x, var(--tpl2-layer-front-mobile-landscape-scale, 1)) var(--tpl2-layer-front-mobile-landscape-scale-y, var(--tpl2-layer-front-mobile-landscape-scale, 1)); }
  body.catalog-template--template_2 .tpl2-scene-layers {
    inset: 0 !important;
  }

  body.catalog-template--template_2 .tpl2-scene-layer--background {
    height: 100dvh !important;
    left: -1.5vw !important;
    min-width: 101.5vw !important;
    width: 101.5vw !important;
  }

  body.catalog-template--template_2 .tpl2-scene-layer--middle {
    bottom: -1rem !important;
    left: calc(59% + var(--tpl2-layer-middle-offset-x)) !important;
    position: absolute !important;
    top: 3% !important;
    transform: translateX(-50%) translateY(-3rem) !important;
    width: min(52vw, 440px) !important;
    --tpl2-layer-rest-transform: translateX(-50%) translateY(-3rem);
    --tpl2-layer-enter-transform: translateX(calc(-50% - 18rem)) translateY(-3rem) scale(.74);
  }

  body.catalog-template--template_2 .tpl2-scene-layer--front {
    bottom: 1rem !important;
    left: 50% !important;
    position: absolute !important;
    width: min(37vw, 330px) !important;
    --tpl2-layer-rest-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x))) translateY(var(--tpl2-layer-front-offset-y));
    --tpl2-layer-enter-transform: translateX(calc(-50% + var(--tpl2-layer-front-offset-x))) translateY(calc(10rem + var(--tpl2-layer-front-offset-y))) scale(.86);
  }
}