/* Gallery */

.gallery {
  width: 100%;
  display: grid;
  gap: 1rem;
}
.gallery .gallery-image-container {
  display: flex;
  flex-direction: column;
}
.gallery + .gallery {
  margin-top: -0.5rem !important;
}
.gallery .gallery-image-container p.image-alt {
  font-size: 0.8rem;
  width: fit-content;
  margin: auto;
  text-align: left;
}

/* Normal */
.gallery-1 {
  grid-template-columns: 1fr;
}
.gallery-2 {
  grid-template-columns: 1fr 1fr;
}
.gallery-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Fancy */
.gallery-2-1 {
  grid-template-areas:             
    "a c c"
    "b c c";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.gallery-1-2 {
  grid-template-areas:             
    "a a b"
    "a a c";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.gallery-2-1 .gallery-image-container:nth-child(n+1),
.gallery-1-2 .gallery-image-container:nth-child(n+1) {
  grid-area: a;
}
.gallery-2-1 .gallery-image-container:nth-child(n+2),
.gallery-1-2 .gallery-image-container:nth-child(n+2) {
  grid-area: b;
}
.gallery-2-1 .gallery-image-container:nth-child(n+3),
.gallery-1-2 .gallery-image-container:nth-child(n+3) {
  grid-area: c;
}

.gallery img,
.gallery video {
  cursor: pointer;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.gallery-2-1 img,
.gallery-1-2 img,
.gallery-2-1 video,
.gallery-1-2 video {
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 1 / 1;
}

/* for modal on frontend */
.gallery-modal img {
  display: none;
  margin: auto;
  box-sizing: border-box;

  width: auto;
  max-width: 100vw;
  height: auto;
  max-height: 100vh;
  border-radius: 5px;
}
.gallery-modal img.gallery-image-show {
  display: unset;
}

.gallery-modal p.gallery-text {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);

  padding: 0.1rem 1rem;

  color: var(--color-font-white);
  background: rgba(0, 0, 0, 0.6);
}
.gallery-modal p.gallery-text:empty {
  display: none;
}

.gallery-modal .gallery-button {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);

  font-size: 3rem;
  padding: 0.1rem 0.3rem;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.6);

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.gallery-modal .gallery-button:hover {
  background: var(--color-background-black);
  color: var(--color-font-white);
  cursor: pointer;
}

.gallery-modal .gallery-left {
  left: 0;
}
.gallery-modal .gallery-right {
  right: 0;
}