.history-detail-points article:has(.history-point-media){
  grid-template-columns:34px 128px minmax(0,1fr);
  align-items:center;
}

.history-point-media{
  position:relative;
  width:128px;
  aspect-ratio:1.08/1;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  background:#090b0c;
}

.history-point-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 36%,rgba(197,43,47,.13));
}

.history-point-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.03);
  animation:historyPointMove 9s ease-in-out infinite alternate;
}

.history-detail-points article:nth-child(2) .history-point-media img{animation-delay:-3s}
.history-detail-points article:nth-child(3) .history-point-media img{animation-delay:-6s}

.history-detail-points article:has(.quality-point-icon){
  grid-template-columns:34px 68px minmax(0,1fr);
  align-items:center;
}

.quality-point-icon{
  position:relative;
  display:grid;
  place-items:center;
  width:62px;
  height:62px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(145deg,#24292b,#0b0d0e 72%);
  color:#fff;
  box-shadow:inset 0 0 0 5px #ffffff05,inset 3px 0 0 #c52b2f,0 14px 28px #0008;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.quality-point-icon:before,.quality-point-icon:after{content:"";position:absolute;background:#d4383d}.quality-point-icon:before{width:14px;height:2px;right:7px;top:8px}.quality-point-icon:after{width:2px;height:14px;left:8px;bottom:7px}

.quality-point-icon svg{
  width:40px;
  height:40px;
  fill:none;
  stroke:#8d979a;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
  animation:qualityIconPulse 5.2s ease-in-out infinite;
}
.quality-point-icon .detail{stroke:#d9ddde}.quality-point-icon .signal{stroke:#e3393e;stroke-width:2.1;filter:drop-shadow(0 0 4px #c52b2f88)}

.history-detail-points article:nth-child(2) .quality-point-icon svg{animation-delay:-1.2s}
.history-detail-points article:nth-child(3) .quality-point-icon svg{animation-delay:-2.4s}
.history-detail-points article:nth-child(4) .quality-point-icon svg{animation-delay:-3.6s}

@keyframes historyPointMove{
  from{transform:scale(1.03) translate3d(-1%,0,0)}
  to{transform:scale(1.12) translate3d(1.5%,-1%,0)}
}

@keyframes qualityIconPulse{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

@media(max-width:520px){
  .history-detail-points article:has(.history-point-media){
    grid-template-columns:30px minmax(0,1fr);
    align-items:start;
  }
  .history-point-media{grid-column:2;width:100%;aspect-ratio:16/8.5}
  .history-detail-points article:has(.history-point-media)>div{grid-column:2}
  .history-detail-points article:has(.quality-point-icon){grid-template-columns:28px 56px minmax(0,1fr)}
  .quality-point-icon{width:52px;height:52px}.quality-point-icon svg{width:34px;height:34px}
}

@media(prefers-reduced-motion:reduce){
  .history-point-media img,.quality-point-icon svg{animation:none;transform:none}
}