.hero--panel-field{
  position:relative;
  min-height:640px;
  overflow:hidden;
  background:#fff;
  border-bottom:1px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.hero--panel-field .hero__inner{
  position:relative;
  z-index:3;
  width:100%;
  text-align:center;
  pointer-events:none;
}
.hero--panel-field .hero__eyebrow{
  color:#111;
  margin-bottom:26px;
}
.hero--panel-field h1{
  margin:0 auto;
  max-width:1180px;
}
.hero--panel-field .hero__news{z-index:4}

.panel-field{
  position:absolute;
  z-index:1;
  top:42px;
  right:-1.5vw;
  width:min(52vw,820px);
  height:500px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  pointer-events:none;
  opacity:.94;
}
.panel-field:after{
  content:"";
  position:absolute;
  inset:-20px -30px;
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.55) 22%,rgba(255,255,255,0) 58%);
  z-index:2;
  pointer-events:none;
}
.panel-field__column{
  position:relative;
  z-index:1;
  width:clamp(72px,8vw,126px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:9px;
}
.panel-field__column--5{height:100%}
.panel-field__column--4{height:82%}
.panel-field__column--3{height:64%}
.panel-field__column--2{height:45%}
.panel-field__column--1{height:25%}

.panel-field__piece{
  display:block;
  width:100%;
  flex:1 1 0;
  min-height:0;
  clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%);
  opacity:0;
  transform:translateY(-680px) rotate(-2deg) scale(.98);
  animation:panel-drop .92s cubic-bezier(.16,.78,.18,1.03) var(--delay) forwards;
  will-change:transform,opacity;
  filter:saturate(.98);
}
.panel-field__piece--a{background:linear-gradient(118deg,#a9151b 0%,#d51f26 48%,#f7c9cb 100%)}
.panel-field__piece--b{background:linear-gradient(118deg,#c81b22 0%,#e34d53 46%,#fde9ea 100%)}
.panel-field__piece--c{background:linear-gradient(118deg,#df3f45 0%,#ef8589 45%,#fff3f4 100%)}
.panel-field__piece--d{background:linear-gradient(118deg,#eb7479 0%,#f5b7ba 45%,#fff 100%)}
.panel-field__piece--e{background:linear-gradient(118deg,#f3a8ac 0%,#fbdfe1 43%,#fff 100%)}

@keyframes panel-drop{
  0%{opacity:0;transform:translateY(-680px) rotate(-3deg) scale(.98)}
  68%{opacity:1;transform:translateY(10px) rotate(.5deg) scale(1)}
  84%{transform:translateY(-5px) rotate(-.2deg) scale(1)}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}

@media(max-width:900px){
  .hero--panel-field{min-height:590px}
  .panel-field{
    right:-16vw;
    top:48px;
    width:68vw;
    height:440px;
    gap:7px;
    opacity:.72;
  }
  .panel-field__column{width:clamp(62px,10vw,92px);gap:7px}
  .panel-field:after{background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.78) 28%,rgba(255,255,255,.16) 72%,rgba(255,255,255,0) 100%)}
}

@media(max-width:600px){
  .hero--panel-field{min-height:540px}
  .panel-field{
    right:-34vw;
    top:72px;
    width:86vw;
    height:340px;
    opacity:.48;
    gap:5px;
  }
  .panel-field__column{width:16vw;gap:5px}
  .panel-field:after{background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.9) 35%,rgba(255,255,255,.3) 78%,rgba(255,255,255,0) 100%)}
}

@media(prefers-reduced-motion:reduce){
  .panel-field__piece{animation:none;opacity:1;transform:none}
}
