.carousel {
  position: relative;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

.carousel-fade {
  .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transform: none;
  }

  .carousel-item.active,
  .carousel-item-next.carousel-item-start,
  .carousel-item-prev.carousel-item-end {
    z-index: 1;
    opacity: 1;
  }

  .active.carousel-item-start,
  .active.carousel-item-end {
    z-index: 0;
    opacity: 0;
  }
}
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;

  &:hover,
  &:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9;
  }
}
.carousel-control-prev {
  left: 0;
}
.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: $carousel-control-width;
  margin-bottom: 1rem;
  margin-left: $carousel-control-width;

  [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: $carousel-indicator-width;
    height: $carousel-indicator-height;
    padding: 0;
    margin-right: $carousel-indicator-spacer;
    margin-left: $carousel-indicator-spacer;
    text-indent: -999px;
    cursor: pointer;
    background-color: $carousel-indicator-active-bg;
    background-clip: padding-box;
    border: 0;
    border-top: $carousel-indicator-hit-area-height solid transparent;
    border-bottom: $carousel-indicator-hit-area-height solid transparent;
    opacity: $carousel-indicator-opacity;
  }

  .active {
    opacity: $carousel-indicator-active-opacity;
  }
}
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption), .visually-hidden:not(caption) {
    position: absolute!important;
}
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
}
#carouselExample { max-width: 355px; margin: auto; touch-action: pan-y; }
.carousel-inner img {
  width: 355px;
  height: 390px;
  object-fit: cover;
  display: block;
  margin: auto;
  user-select: none;
  -webkit-user-drag: none;
  cursor: pointer;
}
@media (max-width: 768px) {
  #carouselExample { max-width: 100vw !important; }
  .carousel-inner img { width: 100vw; height: auto; margin: 0; }
}

/* ---------- modal ---------- */
/*.modal-dialog { max-width: none; }*/
/*.modal-content { background: transparent; border: none; box-shadow: none; }*/
/*.modal-image-container {
  position: relative;
  width: 710px;
  height: 780px;
  margin: auto;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
}*/
#modalImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 1;
  transition: opacity 0.6s ease; /* fade effect like carousel */
}
@media (max-width: 740px), (max-height: 820px) {
/*  .modal-image-container { width: 95vw; aspect-ratio: 710 / 780; height: auto; }*/
  #modalImage { width: 100%; height: 100%; }
}

/* modal buttons */
.modal-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 20;
  user-select: none;
}
.modal-btn:hover { background: rgba(0,0,0,0.65); }
#modalPrev { left: 12px; top: 50%; transform: translateY(-50%); }
#modalNext { right: 12px; top: 50%; transform: translateY(-50%); }
#modalClose { top: 10px; right: 10px; width:44px; height:44px; font-size:1.3rem; }
#modalImage { -webkit-user-drag: none; user-select: none; }