/* GoPride Adaptive Photo Overlay v1.2.0 */
:root {
  --gp-overlay-rgb: 200, 34, 87;
  --gp-overlay-text-rgb: 255, 255, 255;
  --gp-overlay-alpha: 0.91;
  --gp-overlay-padding-x: clamp(1rem, 3vw, 2rem);
  --gp-overlay-padding-y: clamp(0.9rem, 2.2vw, 1.6rem);
  --gp-overlay-transition: 240ms ease;
}

.gp-adaptive-overlay,
[data-gp-adaptive-overlay] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.gp-adaptive-overlay > img,
[data-gp-adaptive-overlay] > img,
.gp-adaptive-overlay [data-gp-image],
[data-gp-adaptive-overlay] [data-gp-image] {
  display: block;
  width: 100%;
  height: auto;
}

.gp-photo-overlay,
[data-gp-overlay] {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  padding: var(--gp-overlay-padding-y) var(--gp-overlay-padding-x);
  color: rgb(var(--gp-overlay-text-rgb));
  background-color: rgba(var(--gp-overlay-rgb), var(--gp-overlay-alpha));
  transition: color var(--gp-overlay-transition), background-color var(--gp-overlay-transition);
}

.gp-photo-overlay :where(h1, h2, h3, h4, h5, h6, p),
[data-gp-overlay] :where(h1, h2, h3, h4, h5, h6, p) {
  color: inherit;
  margin-block-start: 0;
}

.gp-photo-overlay :where(h1, h2, h3, h4, h5, h6):last-child,
.gp-photo-overlay p:last-child,
[data-gp-overlay] :where(h1, h2, h3, h4, h5, h6):last-child,
[data-gp-overlay] p:last-child {
  margin-block-end: 0;
}

.gp-photo-overlay a,
[data-gp-overlay] a {
  color: inherit;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.gp-photo-overlay a:hover,
.gp-photo-overlay a:focus-visible,
[data-gp-overlay] a:hover,
[data-gp-overlay] a:focus-visible {
  color: inherit;
  text-decoration-thickness: 0.14em;
}

.gp-photo-overlay a:focus-visible,
[data-gp-overlay] a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .gp-photo-overlay,
  [data-gp-overlay] {
    transition: none;
  }
}

/* Optional Bootstrap carousel helper. Add .gp-carousel-adaptive to the carousel. */
.gp-carousel-adaptive .carousel-item {
  position: relative;
}

.gp-carousel-adaptive .carousel-caption.gp-photo-overlay {
  right: 0;
  left: 0;
  bottom: 0;
  text-align: left;
}