.video-carousel-container {
      position       : relative;
      max-width      : 870px;
      margin         : 2rem auto 2.5rem auto;
      display        : flex;
      align-items    : center;
      justify-content: center;
      width          : 100%;      
  }

  .carousel-track {
      display        : flex;
      gap            : 1.5rem;
      overflow-x     : auto;
      scroll-behavior: smooth;
      width          : 100%;
      padding        : 1rem 0.5rem;
      overflow: hidden;
  }

  .carousel-slide {
      min-width     : 270px;
      max-width     : 320px;
      background    : #fff;
      border-radius : 12px;
      box-shadow    : 0 2px 12px rgba(0, 0, 0, 0.08);
      display       : flex;
      flex-direction: column;
      align-items   : center;
      transition    : box-shadow .2s;
      cursor        : pointer;
      outline       : none;
  }

  .carousel-slide:focus,
  .carousel-slide:hover {
      box-shadow: 0 0 0 3px #006cb8, 0 4px 18px #006cb84d;
  }

  .carousel-slide img {
      width        : 100%;
      max-width    : 320px;
      border-radius: 12px 12px 0 0;
      object-fit   : cover;
  }

  .carousel-slide .video-btn {
      margin       : 0.7rem 0 1.2rem 0;
      background   : #006cb8;
      color        : #fff;
      border       : none;
      border-radius: 6px;
      padding      : 0.5rem 1.5rem;
      font-size    : 1rem;
      cursor       : pointer;
      transition   : background .2s;
  }

  .carousel-btn:hover,
  .carousel-btn:focus {
      background: #006cb8;
      color     : #fff;
  }

  @media (max-width: 700px) {
      .video-carousel-container {
          max-width: 100vw;
          padding  : 0 0.2rem;
      }

      .carousel-slide {
          min-width: 80vw;
          max-width: 90vw;
      }

      .carousel-btn {
          width    : 32px;
          height   : 32px;
          font-size: 1.2rem;
      }
  }