#carousel {
  min-height: 80cqh;
  display:flex;
  flex: 1;
  container-type: size;
  padding: 1em;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  scroll-behavior: smooth;
  &>.imgbox {
    flex:1;
    container-type: unset;
    scroll-snap-align: center;
    min-width: 100cqw;
    &>figcaption > * {
      display: inline;
      margin-inline: 4px;
      color: white;
    }
  }
  & .carouselbtn {
    --_size: 20px;
    --_margin: 0;
    position: absolute;
    top: calc(50% - var(--_size));
    padding: 0;
    border: var(--_size) solid transparent;
    border-left: none;
    border-right: var(--_size) solid white;
    height: 0;
    left: var(--_margin);
    animation: highlight 1s 3;
    &.next {
      right: var(--_margin);
      left: unset;
      border-left: var(--_size) solid white;
      border-right: none;
    }
  }
}
@keyframes highlight {
  0%,100% {
    translate: 0;
    border-left-color: white;
    border-right-color: white;
  }
  50% {
    translate: 10px 0;
    border-left-color: yellow;
    border-right-color: yellow;
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  #carousel {
    scroll-behavior: auto;
  }
}