/* ===== LiveWall Grid ===== */

#liveWall,
#liveWall * {
  box-sizing: border-box;
}

#liveWall.livewall-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Square tiles */

#liveWall .lw-tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 10px;
  background: #eee;
}

/* Image fill */

#liveWall .lw-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Animations ===== */

/* Fade */
@keyframes lw-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes lw-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.anim-fade.lw-out img {
  animation: lw-fade-out .25s ease forwards;
}

.anim-fade.lw-in img {
  animation: lw-fade-in .25s ease forwards;
}

/* Zoom */
@keyframes lw-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

@keyframes lw-zoom-in {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}

.anim-zoom.lw-out img {
  animation: lw-zoom-out .25s ease forwards;
}

.anim-zoom.lw-in img {
  animation: lw-zoom-in .25s ease forwards;
}

/* Slide Left */
@keyframes lw-slide-left-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-8%); }
}

@keyframes lw-slide-left-in {
  from { opacity: 0; transform: translateX(8%); }
  to { opacity: 1; transform: translateX(0); }
}

.anim-slide-left.lw-out img {
  animation: lw-slide-left-out .25s ease forwards;
}

.anim-slide-left.lw-in img {
  animation: lw-slide-left-in .25s ease forwards;
}

/* Slide Up */
@keyframes lw-slide-up-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8%); }
}

@keyframes lw-slide-up-in {
  from { opacity: 0; transform: translateY(8%); }
  to { opacity: 1; transform: translateY(0); }
}

.anim-slide-up.lw-out img {
  animation: lw-slide-up-out .25s ease forwards;
}

.anim-slide-up.lw-in img {
  animation: lw-slide-up-in .25s ease forwards;
}

/* Flip */
@keyframes lw-flip-out {
  from { opacity: 1; transform: rotateY(0); }
  to { opacity: 0; transform: rotateY(-12deg); }
}

@keyframes lw-flip-in {
  from { opacity: 0; transform: rotateY(12deg); }
  to { opacity: 1; transform: rotateY(0); }
}

.anim-flip.lw-out img {
  animation: lw-flip-out .25s ease forwards;
}

.anim-flip.lw-in img {
  animation: lw-flip-in .25s ease forwards;
}


#liveWall {
  min-height: 600px;
}