.carousel {
      --total-duration: 10s;
      --transition-time: 2s;

      position: relative;
      max-width: 100%;
      margin: 40px auto;
      overflow: hidden;
      /*border-radius: 12px;*/
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .slides {
      display: flex;
      width: 500%;
      animation: slideshow var(--total-duration) infinite ease-out;
    }

    .slide {
      min-width: 20%;
      height: 100%;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 0 3px 8px rgba(0,0,0,0.6);
      cursor: pointer;      
    }

    @keyframes slideshow {
      0%    { transform: translateX(0); }
      20%   { transform: translateX(0); }
      25%   { transform: translateX(-20%); }
      45%   { transform: translateX(-20%); }
      50%   { transform: translateX(-40%); }
      70%   { transform: translateX(-40%); }
      75%   { transform: translateX(-60%); }
      95%   { transform: translateX(-60%); }
      100%  { transform: translateX(-80%); }
    }

    .controls {
      position: absolute;
      bottom: 5px;
      left: 5px;
      z-index: 20;
      background: rgba(0, 0, 0, 0.75);
      color: white;
      border: none;
      padding: 6px 8px;
      border-radius: 50px;
      font-size: 0.8rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      backdrop-filter: blur(6px);
      transition: background 0.3s;
    }

    .controls:hover { background: rgba(0, 0, 0, 0.9); }

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

    /*
    @media (hover: hover) {
      .carousel:not(.paused):hover .slides {
        animation-play-state: paused;
      }
    }*/