.main-section5 {
  background-color: var(--lightBrownColorDarker);
  padding-top: calc(30 * var(--desktopProportions));
  padding-bottom: calc(100 * var(--desktopProportions));
}

.main-section5.dark {
   background-color: var(--brownOrangeDarkDarkColor);
}

.main-section5-header:hover::after {
   width: calc(400 * var(--desktopProportions));
}

.carousel-container {
  width: 210px;
  height: 140px;
  position: relative;
  -webkit-perspective: 1000;
  margin: auto;
  margin-top: calc(70 * var(--desktopProportions));
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: rotation 20s infinite linear;
}

.carousel:hover {
  animation-play-state: paused;
}

.carousel figure {
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
}

.carousel figure:nth-child(1) {
  -webkit-transform: rotateY(0deg);
}
.carousel figure:nth-child(2) {
  -webkit-transform: rotateY(40deg);
}
.carousel figure:nth-child(3) {
  -webkit-transform: rotateY(80deg);
}
.carousel figure:nth-child(4) {
  -webkit-transform: rotateY(120deg);
}
.carousel figure:nth-child(5) {
  -webkit-transform: rotateY(160deg);
}
.carousel figure:nth-child(6) {
  -webkit-transform: rotateY(200deg);
}
.carousel figure:nth-child(7) {
  -webkit-transform: rotateY(240deg);
}
.carousel figure:nth-child(8) {
  -webkit-transform: rotateY(280deg);
}
.carousel figure:nth-child(9) {
  -webkit-transform: rotateY(320deg);
}
.carousel figure:nth-child(1) {
  -webkit-transform: rotateY(0deg) translateZ(288px);
}
.carousel figure:nth-child(2) {
  -webkit-transform: rotateY(40deg) translateZ(288px);
}
.carousel figure:nth-child(3) {
  -webkit-transform: rotateY(80deg) translateZ(288px);
}
.carousel figure:nth-child(4) {
  -webkit-transform: rotateY(120deg) translateZ(288px);
}
.carousel figure:nth-child(5) {
  -webkit-transform: rotateY(160deg) translateZ(288px);
}
.carousel figure:nth-child(6) {
  -webkit-transform: rotateY(200deg) translateZ(288px);
}
.carousel figure:nth-child(7) {
  -webkit-transform: rotateY(240deg) translateZ(288px);
}
.carousel figure:nth-child(8) {
  -webkit-transform: rotateY(280deg) translateZ(288px);
}
.carousel figure:nth-child(9) {
  -webkit-transform: rotateY(320deg) translateZ(288px);
}

.carousel figure img {
  width: inherit;
  -webkit-filter: brightness(0.7);
  cursor: pointer;
  transition: all 0.5s ease;
  border: 2px solid var(--lightOrangeBrownColor);
}

.carousel figure img:hover {
  -webkit-filter: brightness(1);
  transform: scale(1.2, 1.2);
}

@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}