.orosmo-gallery {
  font-family: "Almendra", serif;

  position: relative;

  width: 100%;

  height: 100vh;

  height: 100dvh;

  overflow: hidden;

  background-color: #0a0a0a;
}

/* La barre d'admin WordPress (visible uniquement quand on est connecté)
   est en position:fixed et prend de la hauteur réelle en haut de l'écran.
   On en retire l'équivalent pour que la galerie occupe tout le reste de
   l'écran visible, sans déborder dessous. */
body.admin-bar .orosmo-gallery {
  height: calc(100vh - 32px);

  height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .orosmo-gallery {
    height: calc(100vh - 46px);

    height: calc(100dvh - 46px);
  }
}

.orosmo-gallery-bg {
  position: absolute;

  inset: 0;

  z-index: 0;
}

.orosmo-gallery-bg .orosmo-gallery-bg-layer {
  position: absolute;

  inset: 0;

  opacity: 0;

  transition: opacity 1.2s ease;
}

.orosmo-gallery-bg .orosmo-gallery-bg-layer.is-visible {
  opacity: 1;
}

.orosmo-track {
  position: relative;

  z-index: 1;

  width: 100%;

  height: 100%;
}

.orosmo-slide {
  position: absolute;

  top: 50%;

  left: 50%;

  width: 24vw;

  max-width: 420px;

  transition:
    top 0.8s ease,
    left 0.8s ease,
    transform 0.8s ease,
    opacity 0.8s ease;

  transform: translate(-50%, -50%) scale(0.75);

  opacity: 0;
}

.orosmo-slide.active {
  opacity: 1;

  pointer-events: auto;

  z-index: 30;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(1);
}

.orosmo-slide-image img {
  width: 100%;

  height: auto;

  display: block;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.orosmo-gallery .orosmo-slide-image img {
  border-radius: 20px;
}

.orosmo-slide-title {
  position: absolute;

  left: -25px;

  bottom: 25px;

  z-index: 50;

  font-size: 3rem;

  font-weight: 700;

  text-align: left;

  color: #fed411;
}

.orosmo-controls {
  position: absolute;

  bottom: 50px;

  right: 50px;

  z-index: 100;
}

.orosmo-controls button {
  width: 60px;

  height: 60px;

  border: none;

  cursor: pointer;

  font-size: 22px;
}

.orosmo-slide.prev {
  top: 42%;
  left: 18%;

  opacity: 0.55;

  z-index: 15;

  transform: translate(-50%, -50%) scale(0.5);

  cursor: pointer;
}

.orosmo-slide.next {
  top: 58%;
  left: 82%;

  opacity: 0.55;

  z-index: 15;

  transform: translate(-50%, -50%) scale(0.5);

  cursor: pointer;
}

.orosmo-home {
  position: absolute;

  left: 35px;

  bottom: 35px;

  z-index: 50;

  color: white;

  text-decoration: none;

  font-size: 0.85rem;

  text-transform: uppercase;

  letter-spacing: 2px;

  opacity: 0.6;

  transition: 0.3s;

  border: solid, 0.5px;

  padding: 10px 15px;

  border-radius: 20px;
}

.orosmo-home:hover {
  color: #fed411;
}