@media (max-width: 1024px) {
  .my-gallery[data-my-gallery-layout-mode="carousel"] {
    --my-gallery-carousel-control-inset: 12px;
  }

  .my-gallery[data-my-gallery-layout-mode="carousel"] .my-gallery-carousel__arrow {
    width: var(--my-gallery-carousel-compact-arrow-size);
    height: var(--my-gallery-carousel-compact-arrow-size);
    border-color: var(--my-gallery-carousel-compact-arrow-border-color);
    border-radius: var(--my-gallery-carousel-arrow-radius);
    background: var(--my-gallery-carousel-compact-arrow-background-color);
    box-shadow: var(--my-gallery-carousel-compact-arrow-shadow);
    color: var(--my-gallery-carousel-compact-arrow-color);
    opacity: 1;
  }

  .my-gallery[data-my-gallery-layout-mode="carousel"] .my-gallery-carousel__arrow-icon {
    width: var(--my-gallery-carousel-compact-arrow-icon-size);
    height: var(--my-gallery-carousel-compact-arrow-icon-size);
  }

  .my-gallery[data-my-gallery-layout-mode="carousel"] .my-gallery-carousel__arrow:focus-visible {
    background: var(--my-gallery-carousel-compact-arrow-background-color-hover);
  }

  .my-gallery[data-my-gallery-layout-mode="carousel"] .my-gallery-carousel__arrow--previous {
    left: 12px;
  }

  .my-gallery[data-my-gallery-layout-mode="carousel"] .my-gallery-carousel__arrow--next {
    right: 12px;
  }
}

@media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
  .my-gallery[data-my-gallery-layout-mode="carousel"] .my-gallery-carousel__arrow:hover {
    background: var(--my-gallery-carousel-compact-arrow-background-color-hover);
  }
}

@media (max-width: 700px) {
  .my-gallery-lightbox {
    --my-gallery-lightbox-mobile-inset-top: 10px;
    --my-gallery-lightbox-mobile-inset-right: 10px;
    --my-gallery-lightbox-mobile-inset-bottom: 10px;
    --my-gallery-lightbox-mobile-inset-left: 10px;
    --my-gallery-lightbox-mobile-inline-clearance: 10px;
    --my-gallery-lightbox-mobile-vertical-clearance: max(
      98px,
      calc(var(--my-gallery-lightbox-mobile-inset-top) + 42px),
      calc(var(--my-gallery-lightbox-mobile-inset-bottom) + 88px)
    );
    --my-gallery-lightbox-mobile-image-max-height: max(
      0px,
      calc(
        var(--my-gallery-lightbox-viewport-height)
        - var(--my-gallery-lightbox-mobile-vertical-clearance)
        - var(--my-gallery-lightbox-mobile-vertical-clearance)
      )
    );

    display: block;
    gap: 0;
    padding: 0;
  }

  .my-gallery-lightbox__topbar {
    position: absolute;
    z-index: 4;
    top: var(--my-gallery-lightbox-mobile-inset-top);
    right: var(--my-gallery-lightbox-mobile-inset-right);
    left: var(--my-gallery-lightbox-mobile-inset-left);
  }

  .my-gallery-lightbox__stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .my-gallery-lightbox__figure {
    grid-area: 1 / 1;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 0;
  }

  .my-gallery-lightbox__viewport {
    grid-area: 1 / 1;
  }

  .my-gallery-lightbox__slide {
    padding-right: var(--my-gallery-lightbox-mobile-inline-clearance);
    padding-left: var(--my-gallery-lightbox-mobile-inline-clearance);
  }

  .my-gallery-lightbox__image,
  .my-gallery-lightbox__video {
    max-height: min(
      var(--my-gallery-lightbox-image-max-height),
      var(--my-gallery-lightbox-mobile-image-max-height)
    );
  }

  .my-gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .my-gallery-lightbox__prev {
    left: var(--my-gallery-lightbox-mobile-inline-clearance);
  }

  .my-gallery-lightbox__next {
    right: var(--my-gallery-lightbox-mobile-inline-clearance);
  }

  .my-gallery-lightbox__caption,
  .my-gallery-lightbox__status {
    position: absolute;
    z-index: 3;
    left: 50%;
    width: calc(100% - var(--my-gallery-lightbox-mobile-inline-clearance) - var(--my-gallery-lightbox-mobile-inline-clearance));
    transform: translateX(-50%);
  }

  .my-gallery-lightbox__caption {
    bottom: calc(var(--my-gallery-lightbox-mobile-inset-bottom) + 28px);
    min-height: 0;
  }

  .my-gallery-lightbox__status {
    bottom: var(--my-gallery-lightbox-mobile-inset-bottom);
  }

  @supports (padding: max(0px, env(safe-area-inset-top))) {
    .my-gallery-lightbox {
      --my-gallery-lightbox-mobile-inset-top: max(10px, env(safe-area-inset-top));
      --my-gallery-lightbox-mobile-inset-right: max(10px, env(safe-area-inset-right));
      --my-gallery-lightbox-mobile-inset-bottom: max(10px, env(safe-area-inset-bottom));
      --my-gallery-lightbox-mobile-inset-left: max(10px, env(safe-area-inset-left));
      --my-gallery-lightbox-mobile-inline-clearance: max(
        10px,
        env(safe-area-inset-right),
        env(safe-area-inset-left)
      );
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .my-gallery__item img,
  .my-gallery-lightbox,
  .my-gallery-lightbox__track,
  .my-gallery-lightbox__image,
  .my-gallery-lightbox__video {
    transition: none;
  }
}