.sedistone-lightbox {
  inline-size: 100vw;
  max-inline-size: none;
  block-size: 100vh;
  max-block-size: none;
  margin: 0;
  padding: var(--space-xl);
  border: 0;
  background: color-mix(in oklch, var(--neutral-dark) 96%, transparent);
  overflow: hidden;
}

.sedistone-lightbox::backdrop {
  background: color-mix(in oklch, var(--neutral-dark) 94%, transparent);
}

.sedistone-lightbox__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.sedistone-lightbox__ctrl {
  position: fixed;
  z-index: 2;
  display: grid;
  place-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  min-inline-size: 0;
  padding: 0;
  border: 1px solid color-mix(in oklch, var(--white) 48%, transparent);
  border-radius: 0;
  background: color-mix(in oklch, var(--neutral-dark) 76%, transparent);
  color: var(--white);
  font-size: var(--text-xl);
}

.sedistone-lightbox__ctrl--close {
  inset-block-start: var(--space-m);
  inset-inline-end: var(--space-m);
}

.sedistone-lightbox__ctrl--prev,
.sedistone-lightbox__ctrl--next {
  inset-block-start: calc(50% - 1.5rem);
}

.sedistone-lightbox__ctrl--prev {
  inset-inline-start: var(--space-m);
}

.sedistone-lightbox__ctrl--next {
  inset-inline-end: var(--space-m);
}

@media (max-width: 40rem) {
  .sedistone-lightbox {
    padding: var(--space-l) var(--space-xs);
  }
}