.carousel {
  --carousel-width:  440px;
  --carousel-height: 450px;
  width:  var(--carousel-width); 
  height: var(--carousel-height); 
  /* background-color: red; */
  display: grid;
  grid-template-columns: var(--carousel-width);
  grid-template-rows:    var(--carousel-height);
  place-items: center center;
}

.carousel .images {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1; 
  /* z-index: 1; */
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center center;
}

.carousel .images img {
  max-width:  var(--carousel-width);
  max-height: var(--carousel-height);
}

.carousel .images img.hide {
  display: none;
} 

.carousel .pagination {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row-start: 1;
  grid-row-end: -1;
  width:  var(--carousel-width); 
  height: var(--carousel-height); 
  
  display: grid; 
  /* In html  */
  /* grid-template-columns: repeat(3, 1fr);  */
  gap: 0px 0px;
  /* gap: 0px 5px; 
  justify-content: space-evenly;  */
  z-index: 1;
}

.carousel .pagination > div {
  position: relative;
}

.carousel .page > div {
  position: absolute;
  background-color: black;
  opacity: 0.12;
  height: 6px; 
  /* width:  100%; */
  width:  auto; 
  left:   4px;
  right:  4px;
  bottom: 0px;
  border-radius: 6px;
}

.carousel .page > div.hide {
  opacity: 0.0;
}