/* A wall of individual images. Every cover keeps its own native proportions. */
.gal.thumbnail-wall {
  --thumb-cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--thumb-cols), minmax(0, 1fr));
  grid-auto-rows: 1px;
  column-gap: 22px;
  row-gap: 0;
  align-items: start;
}
.thumbnail-card {
  min-width: 0;
  padding-bottom: 20px;
  grid-row: span var(--thumb-span, 360);
}
.thumbnail-card[hidden] { display: none; }
.thumbnail-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  text-align: start;
  cursor: pointer;
  color: var(--text);
}
.thumbnail-frame {
  position: relative;
  display: block;
  aspect-ratio: var(--thumb-aspect, 1.77778);
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg, #211731, #100a1d);
  box-shadow: 0 0 0 1px rgba(219, 197, 255, .2), 0 16px 30px -25px rgba(0, 0, 0, .7);
  transition: box-shadow .4s, transform .6s var(--motion-ease, ease);
}
.thumbnail-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 3, 20, .18), transparent 25%, transparent 70%, rgba(8, 3, 20, .22));
  pointer-events: none;
  opacity: .45;
  transition: opacity .4s;
}
.thumbnail-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.thumbnail-number {
  position: absolute;
  z-index: 1;
  top: 12px;
  inset-inline-start: 12px;
  min-width: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  background: rgba(14, 7, 26, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: 400 10px/1.2 Michroma, sans-serif;
}
.thumbnail-expand {
  position: absolute;
  z-index: 1;
  inset-inline-end: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(234, 213, 255, .4);
  border-radius: 50%;
  background: rgba(15, 7, 28, .58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: white;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .3s, transform .4s var(--motion-ease, ease), background .3s;
}
.thumbnail-expand svg { width: 19px; height: 19px; }
.thumbnail-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 44px; padding: 0 2px; }
.thumbnail-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.thumbnail-format { flex: none; color: var(--muted); font-size: 12px; }
.thumbnail-open:is(:hover, :focus-visible) .thumbnail-frame { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(220, 175, 255, .8), 0 20px 40px -26px rgba(175, 105, 255, .65); }
.thumbnail-open:is(:hover, :focus-visible) .thumbnail-frame::after { opacity: 0; }
.thumbnail-open:is(:hover, :focus-visible) .thumbnail-expand { opacity: 1; transform: none; background: rgba(123, 69, 191, .9); }
.thumbnail-open:focus-visible { outline: 2px solid var(--pink); outline-offset: 6px; }
.thumbnail-open:active .thumbnail-frame { transform: scale(.99); }
.is-image-gallery .collection-heading { margin-bottom: 30px; }
.is-image-gallery .collection-heading h3 { font-size: clamp(28px, 4vw, 42px); }
.is-image-gallery .collection-heading p { max-width: 62ch; }
html[lang="ar"] .thumbnail-open { font-family: Cairo, Manrope, sans-serif; }
.motion-enabled .thumbnail-frame img { transition: opacity .4s ease; }
@media (max-width: 600px) {
  .gal.thumbnail-wall { --thumb-cols: 1; }
  .thumbnail-frame { border-radius: 14px; }
  .thumbnail-title { font-size: 13px; }
  .is-image-gallery .collection-heading h3 { font-size: 27px; }
  .is-image-gallery .collection-heading { gap: 12px; }
}
@media (hover: none) { .thumbnail-expand { opacity: 1; transform: none; width: 33px; height: 33px; bottom: 10px; inset-inline-end: 10px; } }