/* banner-gallery */
.btn-wide {
  max-width: 100%;
  min-width: 100%;
  width: 100%;
}

#gallery {
  padding: 1rem;
}

#gallery > .row {
  justify-content: center;
}

#gallery > .row > .col {
  max-width: 300px;
}

.gallery-heading {
}

/* Increase radius of rounded corners; overrides setting in _border-radius.scss */
.card,
.card-img,
.card-img-top {
  border-top-left-radius:  calc(0.5rem - 1px) !important;
  border-top-right-radius: calc(0.5rem - 1px) !important;
}

.card,
.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.5rem - 1px) !important;
  border-bottom-left-radius:  calc(0.5rem - 1px) !important;
}

/* 2023-11-24 Wrap IMG in container DIV, clamp height */
.card-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  overflow: hidden;
}
/* 2023-11-24 Override width:100% from _card.scss */
.card-img-container img {
  width: fit-content;
  max-height: 100%;
}


/* inherit bottom border radius from .card container */
/* No: rounded corners look bad if there's a CTA button below
.card-body {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius:  inherit;
}
*/

.splide__pagination__page {
  background-color: #fff !important;
  color: black !important;
  opacity: 1 !important;
  font-size: larger !important;
}

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#banner-slider {
  padding-left:  49px !important;
  padding-right: 49px !important;
}

@media (max-width: 320px) {
  #banner-slider {
    padding-left:  0 !important;
    padding-right: 0 !important;
  }
}


/*
  Gallery tiles may have 2 images:
  - a horizontal image for narrow screens (stacked in a single column)
  - a vertical image for wide screens (packed in a single row)
*/
@media (max-width: 767px) {
  #gallery .card-image-vertical { display: none; }
}

@media (min-width: 768px) {
  #gallery .card-image-horizontal { display: none; }

  #gallery .card-container.with-vertical {
    width: 20%;
    padding: 0;
  }
}

/**/