.lusso-page-gallery {
  --lusso-gallery-columns: 3;
  --lusso-gallery-gap: 8px;
  --lusso-gallery-image-height: 260px;
  display: grid;
  grid-template-columns: repeat(var(--lusso-gallery-columns), minmax(0, 1fr));
  gap: var(--lusso-gallery-gap);
  width: 100%;
}

.lusso-page-gallery__item {
  position: relative;
  display: block;
  min-width: 0;
  height: var(--lusso-gallery-image-height);
  overflow: hidden;
  background: #e8edf0;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.lusso-page-gallery__item::after {
  position: absolute;
  z-index: 1;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgb(0 0 0 / 68%));
  content: "";
  pointer-events: none;
  transition: opacity 180ms ease;
}

.lusso-page-gallery .lusso-page-gallery__item > .lusso-page-gallery__image,
.lusso-page-gallery .lusso-page-gallery__item > .lusso-page-gallery__placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  transition: transform 350ms cubic-bezier(.2,.65,.3,1);
}

.lusso-page-gallery__placeholder {
  background: linear-gradient(135deg, #d9e2e8, #aabac4);
}

.lusso-page-gallery__title {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 16px;
  left: 18px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 1px 8px rgb(0 0 0 / 35%);
}

.lusso-page-gallery__item:hover .lusso-page-gallery__image,
.lusso-page-gallery__item:focus-visible .lusso-page-gallery__image {
  transform: scale(1.035);
}

.lusso-page-gallery__item:hover::after,
.lusso-page-gallery__item:focus-visible::after {
  inset-block-start: 20%;
}

.lusso-page-gallery__item:focus-visible {
  outline: 3px solid #0879a8;
  outline-offset: 3px;
  z-index: 2;
}

@media (max-width: 767px) {
  .lusso-page-gallery { --lusso-gallery-columns: 2; }
  .lusso-page-gallery__item { height: clamp(180px, 48vw, var(--lusso-gallery-image-height)); }
}

@media (max-width: 480px) {
  .lusso-page-gallery { --lusso-gallery-columns: 1; }
  .lusso-page-gallery__item { height: clamp(210px, 72vw, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  .lusso-page-gallery__image,
  .lusso-page-gallery__item::after { transition: none; }
}