.msc {
      position: relative;
      padding: 56px 0 80px;
      top:4vh;
    }
    .msc-viewport {
      position: relative;
      margin: 0 auto;
      width: min(1200px, 94vw);
      height: var(--slideH);
      --slideW: 360px;   /* wider */
      --slideH: 220px;   /* shorter */
      --gap: 220px;      /* spacing */
    }

    @media (max-width: 992px) {
      .msc-viewport { --slideW: 300px; --slideH: 180px; --gap: 180px; }
    }
    @media (max-width: 576px) {
      .msc-viewport { --slideW: 240px; --slideH: 150px; --gap: 140px; }
    }

    .msc-track { position: relative; width: 100%; height: 100%; }

    .msc-slide {
      position: absolute;
      top: 0; left: 50%;
      width: var(--slideW);
      height: var(--slideH);
      transform: translateX(-50%);
      transition: transform .6s ease, opacity .6s ease, filter .6s ease, box-shadow .6s ease;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(0,0,0,.45);
      background: #222;
    }
    .msc-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Position scaling */
    @media screen and (min-width:992px){
      .msc-slide.pos-2 {
        transform: translateX(calc(-50% - var(--gap) * 2)) scale(1.5) rotateY(-18deg);
        opacity: .5; z-index: 2;
      }
      .msc-slide.pos-1 {
        transform: translateX(calc(-50% - var(--gap))) scale(1.75) rotateY(-12deg);
        opacity: .8; z-index: 3;
      }
      .msc-slide.pos0 {
        transform: translateX(-50%) scale(2.25);
        opacity: 1; z-index: 5;
      }
      .msc-slide.pos1 {
        transform: translateX(calc(-50% + var(--gap))) scale(1.75) rotateY(12deg);
        opacity: .8; z-index: 3;
      }
      .msc-slide.pos2 {
        transform: translateX(calc(-50% + var(--gap) * 2)) scale(1.5) rotateY(18deg);
        opacity: .5; z-index: 2;
      }
    }
    @media screen and (max-width:992px){
      .msc-slide.pos-2 {
        transform: translateX(calc(-50% - var(--gap) * 2)) scale(1) rotateY(-18deg);
        opacity: .5; z-index: 2;
      }
      .msc-slide.pos-1 {
        transform: translateX(calc(-50% - var(--gap))) scale(1.25) rotateY(-12deg);
        opacity: .8; z-index: 3;
      }
      .msc-slide.pos0 {
        transform: translateX(-50%) scale(1.5);
        opacity: 1; z-index: 5;
      }
      .msc-slide.pos1 {
        transform: translateX(calc(-50% + var(--gap))) scale(1.25) rotateY(12deg);
        opacity: .8; z-index: 3;
      }
      .msc-slide.pos2 {
        transform: translateX(calc(-50% + var(--gap) * 2)) scale(1) rotateY(18deg);
        opacity: .5; z-index: 2;
      }
    }

    .msc-slide.offscreen {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-50%) scale(.5);
      z-index: 1;
    }

    .msc-caption {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 10px 12px;
      background: linear-gradient(transparent, rgba(0,0,0,.75));
      font-size: 13px; font-weight: 600;
      color:transparent;
    }

    .msc-control {
      position: absolute; top: 50%; transform: translateY(-50%);
      z-index: 6;
      z-index:-99999;
    }
    .msc-prev { left: 10px; }
    .msc-next { right: 10px; }

    .btn-icon {
      width: 42px; height: 42px;
      border-radius: 50%;
      display: grid; place-items: center;
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.25);
      backdrop-filter: blur(4px);
      color: #fff;
    }
    .btn-icon:hover { background: rgba(255,255,255,.25); }