.ribbon-hero{width:100%;max-width:580px;min-height:430px;margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;align-items:center;isolation:isolate}.ribbon-phone{background:#161218;border:2px solid #514550;border-radius:22px;padding:19px 4px 21px;box-shadow:0 18px 25px #10031d66;position:relative;overflow:hidden;transform:translateY(var(--offset,0)) rotate(var(--tilt,0deg))}.ribbon-phone:before{content:'';position:absolute;top:8px;left:40%;width:20%;height:3px;border-radius:10px;background:#655967}.ribbon-phone:after{content:'';position:absolute;bottom:5px;left:calc(50% - 6px);width:12px;height:12px;border:1px solid #655967;border-radius:50%}.reference-home .hero-template-showcase .ribbon-phone img,.ribbon-phone img{width:100%;max-width:none;height:auto;aspect-ratio:390/693;object-fit:cover;display:block;filter:none;border-radius:3px}.ribbon-phone:nth-child(1){--offset:24px;--tilt:-9deg}.ribbon-phone:nth-child(2){--offset:-30px;--tilt:-3deg}.ribbon-phone:nth-child(3){--offset:24px;--tilt:3deg}.ribbon-phone:nth-child(4){--offset:-18px;--tilt:9deg}@media(max-width:640px){.ribbon-hero{min-height:300px;gap:5px;max-width:440px}.ribbon-phone{padding:15px 3px 17px;border-radius:16px}.ribbon-phone:before{top:6px}.ribbon-phone:after{width:9px;height:9px;left:calc(50% - 4px);bottom:4px}}