carousel {
  overflow: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;

  display: flex;
  align-items: center;
  gap: 100px;

  width: 100%;

  &.fullwidth {
    width: 100vw;
    padding: 0 calc(((100vw - 1200px) / 2));
    scroll-padding: 0 calc(((100vw - 1200px) / 2));
  }

  * {
    scroll-snap-align: start;
  }
}

carousel3 {
  overflow: auto;

  display: flex;
  align-items: center;
  gap: 100px;

  width: 100%;

  &.fullwidth {
    width: 100vw;
    padding: 0 max(16px, calc(((100vw - 1200px) / 2)));
    scroll-padding: 0 calc(((100vw - 1200px) / 2));
  }
}

carousel2 {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 100px;

  width: 100%;
  overflow: hidden;

  > .content {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 100px;
    animation: carouselRoll 20s linear infinite;

    &:hover {
      animation-play-state: paused;
    }

    &:active {
      animation-play-state: running;
    }
  }
}

@keyframes carouselRoll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - (100px / 2)));
  }
}