:root {
  --responsive_slider-arrow-size: 48px;
  --responsive_slider-dot-size: 10px;
  --responsive_slider-gap: 0.5rem;
  --responsive_slider-bg: #111;
}
* { box-sizing: border-box; }
body { margin:0; background:#f7f7f7; font-family:sans-serif; }

.responsive_slider {
  max-width:100%;
  
  /* margin:40px auto; 
  border-radius:12px;
  background:var(--responsive_slider-bg);
  */
  position:relative;
  overflow:hidden;
}

.responsive_slider-slides {
  display:flex;
  transition:transform 480ms cubic-bezier(.22,.9,.25,1);
  will-change:transform;
}

.responsive_slider-slide {
  width: 100%;       /* ensure slide matches slider width */
  flex: 0 0 100%;    /* don't shrink/grow */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.responsive_slider-slide img {
  width: 100%;
  /*height: 60vh;       /* or auto / contain depending on your choice */
  object-fit: cover;
  display: block;
}

/* Arrows */
.responsive_slider-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:var(--responsive_slider-arrow-size);
  height:var(--responsive_slider-arrow-size);
  border-radius:50%;
  background:rgba(0,0,0,0.45);
  color:white;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:5;
  border:0;
  opacity:.95;
}
.responsive_slider-arrow:hover { transform:translateY(-50%) scale(1.05); }
.responsive_slider-arrow[aria-hidden="true"] { display:none; }
.responsive_slider-prev { left:12px; }
.responsive_slider-next { right:12px; }
.responsive_slider-arrow svg { width:20px; height:20px; }

/* Dots */
.responsive_slider-dots {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  display:flex;
  gap:calc(var(--responsive_slider-gap));
  z-index:6;
}
.responsive_slider-dot {
  width:var(--responsive_slider-dot-size);
  height:var(--responsive_slider-dot-size);
  border-radius:50%;
  background:rgba(255,255,255,0.6);
  border:0;
  cursor:pointer;
  padding:0;
}
.responsive_slider-dot[aria-pressed="true"] {
  background:white;
  box-shadow:0 0 0 4px rgba(255,255,255,0.08);
}

/* Caption */
.responsive_slider-caption {
	position: absolute;
    /* left: 16px; */
    bottom: 0px;
	text-align:center;
    background: #00687d;
    padding: 5px;
    color: white;
    /*text-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);*/
    font-size: clamp(14px, 1.6vw, 20px);
    z-index: 4;
    width: 100%;
}

/* Small screens */
@media (max-width:480px){
  .responsive_slider-arrow { width:40px; height:40px; }
  .responsive_slider-caption { bottom:72px; left:12px; font-size:14px; }
}