.accordion-gallery {
  --gallery-gap: 10px;
  display: flex;
  width: 100%;
  height: 360px;
  gap: 0;
  perspective: 1200px;
}

.accordion-gallery .ag-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #17232d;
  border: 0;
  border-radius: 0;
  box-shadow: 0 10px 24px rgb(23 38 51 / 18%);
  cursor: pointer;
  outline: none;
  transform: none;
  transform-style: preserve-3d;
  transition: flex-grow .58s cubic-bezier(.2,.75,.25,1), transform .58s cubic-bezier(.2,.75,.25,1), box-shadow .35s ease;
}

.accordion-gallery .ag-panel:nth-child(-n + 1) { transform: none; }
.accordion-gallery .ag-panel.is-active { flex-grow: 4.15; box-shadow: 0 16px 32px rgb(23 38 51 / 28%); transform: none; }
.accordion-gallery .ag-panel:focus-visible { box-shadow: 0 0 0 3px #fff, 0 16px 32px rgb(23 38 51 / 28%); }

.ag-media,
.ag-shade { position: absolute; inset: 0; }
.ag-media { overflow: hidden; }
.ag-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 120px);
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: grayscale(1);
  transform: translate(-50%, -50%) scale(1.06) translateX(var(--media-shift, 0));
  transition: filter .58s ease, transform .58s cubic-bezier(.2,.75,.25,1);
}

.ag-panel.is-active .ag-media img { filter: grayscale(0); transform: translate(-50%, -50%) scale(1.06) translateX(0); }
.ag-shade { background: linear-gradient(180deg, rgb(6 17 26 / 8%) 35%, rgb(6 17 26 / 86%) 100%), rgb(6 17 26 / 43%); transition: background .5s ease; }
.ag-panel.is-active .ag-shade { background: linear-gradient(180deg, rgb(6 17 26 / 2%) 36%, rgb(6 17 26 / 78%) 100%), rgb(6 17 26 / 3%); }

.ag-caption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: flex;
  gap: 12px;
  align-items: center;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .32s ease .14s, transform .42s cubic-bezier(.2,.75,.25,1) .12s;
}

.ag-caption i { width: 3px; height: 46px; flex: 0 0 auto; background: #fff; box-shadow: 0 0 12px rgb(255 255 255 / 55%); }
.ag-caption strong,
.ag-caption small { display: block; white-space: nowrap; text-shadow: 0 2px 10px rgb(0 0 0 / 42%); }
.ag-caption strong { font-size: 22px; line-height: 1.25; }
.ag-caption small { margin-top: 5px; font-size: 12px; opacity: .78; }
.ag-panel.is-active .ag-caption { opacity: 1; transform: translateX(0); }

@media (hover: hover) {
  .accordion-gallery .ag-panel:hover { flex-grow: 4.15; box-shadow: 0 16px 32px rgb(23 38 51 / 28%); transform: none; }
  .accordion-gallery .ag-panel:hover .ag-media img { filter: grayscale(0); transform: translate(-50%, -50%) scale(1.06) translateX(0); }
  .accordion-gallery .ag-panel:hover .ag-shade { background: linear-gradient(180deg, rgb(6 17 26 / 2%) 36%, rgb(6 17 26 / 78%) 100%), rgb(6 17 26 / 3%); }
  .accordion-gallery .ag-panel:hover .ag-caption { opacity: 1; transform: translateX(0); }
}

@media (max-width: 800px) {
  .accordion-gallery { height: auto; display: grid; grid-template-columns: 1fr; gap: 0; perspective: none; }
  .accordion-gallery .ag-panel,
  .accordion-gallery .ag-panel:nth-child(-n + 1) { min-height: 160px; transform: none; }
  .accordion-gallery .ag-panel.is-active { flex-grow: 1; }
  .ag-media img { width: 100%; }
  .ag-caption { right: 16px; bottom: 16px; left: 16px; opacity: 1; transform: none; }
  .ag-caption i { height: 34px; }
  .ag-caption strong { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .accordion-gallery .ag-panel,
  .ag-media img,
  .ag-caption,
  .ag-shade { transition-duration: .01ms; }
}