.elli-gallery {
  --elli-gallery-grid-columns: 1;

  color: var(--elli-gallery-color, #1a1a1a);
}

.elli-gallery__title {
  margin-block: 0 var(--elli-gallery-title-spacing, 1rem);
  color: var(--elli-gallery-title-color, currentColor);
}

.elli-gallery__intro {
  max-inline-size: var(--elli-gallery-intro-max-width, 48rem);
  margin-block-end: var(--elli-gallery-intro-spacing, 1.5rem);
}

.elli-gallery__intro > :last-child {
  margin-block-end: 0;
}

.elli-gallery__grid {
  display: grid;
  grid-template-columns: repeat(var(--elli-gallery-grid-columns), minmax(0, 1fr));
  gap: var(--elli-gallery-gap, 1rem);
}

.elli-gallery__item {
  margin: 0;
}

.elli-gallery__button {
  display: block;
  inline-size: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--elli-gallery-border-radius, 0.5rem);
  cursor: zoom-in;
}

.elli-gallery__button:focus-visible {
  outline: var(--jsd-elli-focus-ring-width, 3px) solid var(--jsd-elli-focus-ring-color, #0d6efd);
  outline-offset: var(--jsd-elli-focus-ring-offset, 3px);
  box-shadow: var(--jsd-elli-focus-ring-shadow, none);
}

.elli-gallery__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--elli-gallery-image-background, #f4f4f4);
  border-radius: var(--elli-gallery-border-radius, 0.5rem);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.elli-gallery--ratio-square .elli-gallery__image {
  aspect-ratio: 1 / 1;
}

.elli-gallery--ratio-portrait .elli-gallery__image {
  aspect-ratio: 3 / 4;
}

.elli-gallery__button:hover .elli-gallery__image {
  transform: scale(1.015);
  box-shadow: var(--elli-gallery-hover-shadow, 0 0.75rem 1.75rem rgba(0, 0, 0, 0.16));
}

.elli-gallery__caption {
  margin-block-start: var(--elli-gallery-caption-spacing, 0.5rem);
  color: var(--elli-gallery-caption-color, #4a4a4a);
  font-size: var(--elli-gallery-caption-font-size, 0.9375rem);
  line-height: 1.45;
}

.elli-gallery-modal__content {
  color: var(--elli-gallery-modal-color, #ffffff);
  background: var(--elli-gallery-modal-background, #111111);
  border: 0;
  border-radius: var(--elli-gallery-modal-border-radius, 0.75rem);
}

.elli-gallery-modal__header {
  border-bottom-color: var(--elli-gallery-modal-border-color, rgba(255, 255, 255, 0.18));
}

.elli-gallery-modal__title {
  font-size: var(--elli-gallery-modal-title-font-size, 1rem);
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}

.elli-gallery-modal__close {
  filter: var(--elli-gallery-modal-close-filter, invert(1) grayscale(100%) brightness(200%));
}

.elli-gallery-modal__body {
  display: grid;
  gap: 1rem;
}

.elli-gallery-modal__image {
  display: block;
  inline-size: 100%;
  max-block-size: 75vh;
  object-fit: contain;
  border-radius: var(--elli-gallery-modal-image-border-radius, 0.375rem);
}

.elli-gallery-modal__caption {
  margin: 0;
  color: var(--elli-gallery-modal-caption-color, #f2f2f2);
  font-size: var(--elli-gallery-modal-caption-font-size, 0.95rem);
  line-height: 1.5;
}

.elli-gallery-modal .btn-close:focus-visible {
  outline: var(--jsd-elli-focus-ring-width, 3px) solid var(--jsd-elli-focus-ring-color, #0d6efd);
  outline-offset: var(--jsd-elli-focus-ring-offset, 3px);
  box-shadow: var(--jsd-elli-focus-ring-shadow, none);
}

@media (min-width: 576px) {
  .elli-gallery {
    --elli-gallery-grid-columns: 2;
  }
}

@media (min-width: 768px) {
  .elli-gallery--columns-3 {
    --elli-gallery-grid-columns: 3;
  }

  .elli-gallery--columns-4 {
    --elli-gallery-grid-columns: 3;
  }
}

@media (min-width: 1200px) {
  .elli-gallery--columns-2 {
    --elli-gallery-grid-columns: 2;
  }

  .elli-gallery--columns-3 {
    --elli-gallery-grid-columns: 3;
  }

  .elli-gallery--columns-4 {
    --elli-gallery-grid-columns: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elli-gallery,
  .elli-gallery * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}