Image Lightbox Frame

<div class="nuda-mdx-lightbox" role="dialog" aria-modal="true" aria-label="Image lightbox">
  <div class="nuda-mdx-lightbox__backdrop"></div>
  <div class="nuda-mdx-lightbox__frame">
    <button class="nuda-mdx-lightbox__close" aria-label="Close">&times;</button>
    <div class="nuda-mdx-lightbox__img">
      <img src="your-image.jpg" alt="Lightbox image" />
    </div>
    <div class="nuda-mdx-lightbox__nav">
      <button class="nuda-mdx-lightbox__arrow" aria-label="Previous">&#8592;</button>
      <span class="nuda-mdx-lightbox__count">1 / 4</span>
      <button class="nuda-mdx-lightbox__arrow" aria-label="Next">&#8594;</button>
    </div>
  </div>
</div>

.nuda-mdx-lightbox {
  position: relative;
  width: 100%;
  height: 155px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-mdx-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
}

.nuda-mdx-lightbox__frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  background: rgba(18,18,18,.95);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .7rem .75rem;
  animation: _nuda-mdxLbIn .4s cubic-bezier(.16,1,.3,1) both;
}

.nuda-mdx-lightbox__close {
  position: absolute;
  top: .4rem;
  right: .55rem;
  background: rgba(255,255,255,.07);
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: .65rem;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-mdx-lightbox__img {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
}

.nuda-mdx-lightbox__nav {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.nuda-mdx-lightbox__arrow {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: #cfcfcf;
  font-size: .65rem;
  padding: .2rem .45rem;
  cursor: pointer;
}

.nuda-mdx-lightbox__count {
  font-size: .6rem;
  color: #555;
}

@keyframes _nuda-mdxLbIn {
  from {
    opacity: 0;
    transform: scale(.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-mdx-lightbox__frame {
    animation: none;
  }
}