.slider {

    position: relative;

    width: 100vw;

    height: 100vh;

    overflow: hidden;

    user-select: none;

  }

  .slides {

    display: flex;

    height: 100vh;

    transition: transform 0.5s ease-in-out;

    will-change: transform;

  }

  .slide-wrapper {

    position: relative;

    flex-shrink: 0;

    width: 100vw;

    height: 100vh;

    background: #000; /* fallback background */

    display: flex;

    justify-content: center; /* center horizontally */

    align-items: center;     /* center vertically */

    overflow: hidden;

  }

  .slide-wrapper img {

    max-height: 100%;

    max-width: 100%;

    user-select: none;

    pointer-events: none;

    /* object-fit is set by class */

  }

  .slide-wrapper.landscape img {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

  .slide-wrapper.portrait img {

    width: auto;

    height: 100%;

    object-fit: contain;

    background: #111; /* dark background behind portrait */

  }

  /* overlay to improve text readability */

  .overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.3);

    pointer-events: none;

    z-index: 2;

  }

  /* arrows */

  .arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(0,0,0,0.5);

    color: white;

    border: none;

    width: 48px; height: 48px;

    cursor: pointer;

    font-size: 2rem;

    border-radius: 50%;

    user-select: none;

    z-index: 5;

  }

  .arrow:hover {

    background: rgba(0,0,0,0.7);

  }

  .arrow.prev {

    left: 10px;

  }

  .arrow.next {

    right: 10px;

  }

  /* dots */

  .dots {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    gap: 12px;

    z-index: 5;

  }

  .dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: rgba(255,255,255,0.5);

    cursor: pointer;

  }

  .dot.active {

    background: #ffcc00;

  }

  /* progress bar */

  .progress-container {

    position: absolute;

    bottom: 0;

    left: 0; right: 0;

    height: 4px;

    background: rgba(255, 255, 255, 0.15);

    z-index: 4;

  }

  .progress-bar {

    width: 0%;

    height: 100%;

    background: #ffcc00;

    transition: width linear;

  }

  

  .caption {

    position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%);

    max-width: 85%;

    text-align: center;

    color: #fff;

    font-size: 2rem;

    font-weight: bold;

    padding: 12px 18px;

    background: rgba(0,0,0,0.35);

    border-radius: 8px;

    z-index: 3;

  }

  

.slide-wrapper a {

  display: block;

  *width: 100%;

  height: 100%;

}



.slide-wrapper a img {

  width: 100%;

  height: 100%;

  display: block;

}

@media (max-width: 768px) {
    .slider {
      height: auto;
    }
    .slide-wrapper{
        height: auto;
    }
    .slides{
        height:auto;
    }
    
  }