.lightbox {
  border: none;
  padding: 0 2.5rem;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  max-height: calc(100% - 2em - 6px); /* This is the default for <dialog> elements for many browsers, but committing it so we can reuse the calculation on inner elements safely. */

  .lightbox-content {
    max-height: calc(95vh - 2em - 6px);
    overflow: auto;

    .lightbox-inner-content {
      padding-top: 1rem;
      padding-bottom: 1rem;

      .image-container {
        max-width: min(var(--lightbox-width, 56.25rem), 90vw);
      }

      &:has(> :first-child img) {
        padding-top: 0;
      }

      &:has(> :last-child img) {
        padding-bottom: 0;
      }

      > * {
        padding: 0 1rem;
        display: block;

        &:not(:last-child) {
          margin-bottom: 1rem;
        }

        &:has(img) {
          padding: 0;
        }
      }
    }
  }

  .dialog-close {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    position: absolute;
    color: #ffffff;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
    outline: none;

    svg {
      width: 1rem;
    }
  }

  &::backdrop {
    background: rgba(120,18,92, .85);
  }
}