/* GENERATED by wp/generator/port_assets.py: the sketch's phone-only hero rules (.hx.m) as a media query. Do not edit. */
@media (max-width: 820px){
.hx1{display: block; height: auto; padding-bottom: 18px;}
.hx1 .hx-txt{padding: 28px 22px 24px;}
.hx2{display: block; grid-template-columns: none; grid-template-rows: none; padding-bottom: 14px;}
.hx2 .hx-txt{padding: 28px 22px 22px;}
.hx3{height: auto; padding: 28px 16px 16px;}
.hx3 .hx-h1{font-size: clamp(40px, 11.6vw, 50px);}
.hx3 .hx-h1 .l{display: block;}
.hx3 .hx-acts{flex-direction: column;}
.hx3 .hx-acts .btn{width: 100%;}
.hx3 .hx3-stage{flex: none; height: 372px; margin-top: 24px;}
.hx3 .hx3-dev{height: 100%; aspect-ratio: auto; width: 45%;}
.hx3 .hx3-layer{align-items: flex-start;}
.hx3 .hx3-name{flex-direction: column; align-items: center; gap: 2px;}
.hx3 .hx3-cap{gap: 2px 18px;}
.hx4{height: auto;}
.hx4 > .hx-txt{position: relative; top: auto; transform: none; width: auto; padding: 28px 22px 4px;}
.hx4 .hx4-scene{position: relative; inset: auto; height: 372px; margin-top: -26px; perspective: 900px; perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%);}
.hx4 .hx4-plane{top: -58%; left: -40%; width: 180%; height: 250%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; transform: rotateX(46deg) rotateZ(-30deg);}
.hx4 .trk > *{margin-bottom: 12px;}
.hx4 .hx4-col:nth-child(odd){margin-top: -60px;}
.hx4 .hx4-fade{display: none;}
.hx4 > .hx-txt{transform: none; padding: 46px 22px 0;}
.hx4 .hx4-scene{margin-top: 18px; height: 356px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 12%, #000 30%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 12%, #000 30%);}
@media (max-width: 820px){
.hx .hx-acts,.hx3 .hx-acts{flex-direction: row; flex-wrap: nowrap; gap: 8px;}
.hx .hx-acts .btn{flex: 1 1 auto; width: auto; min-width: 0; padding-inline: 14px; font-size: 15px; white-space: nowrap;}
.hx .hx-acts .btn:first-child{flex-grow: 1.4;}
.hx .hx-acts .btn svg{width: 16px; height: 16px;}
}
@media (max-width: 374px){
.hx .hx-acts .btn:not(:first-child){display: none;}
}
}
/* the same for the Elementor buttons */
@media (max-width: 820px){
.hx3 .hx-acts .sdb .elementor-button{width: 100%}
.hx3 .hx-acts .sdb{width: 100%}
@media (max-width: 820px){
.hx .hx-acts .sdb .elementor-button{width: auto;min-width: 0;padding-inline: 14px;font-size: 15px;white-space: nowrap}
.hx .hx-acts .sdb{flex: 1 1 auto;width: auto;min-width: 0}
.hx .hx-acts .sdb:first-child{flex-grow: 1.4}
}
@media (max-width: 374px){
.hx .hx-acts .sdb:not(:first-child) .elementor-button{display: none}
.hx .hx-acts .sdb:not(:first-child){display: none}
}
}