/* Impressionen: organisches Mosaik, leichte Verschiebungen – nur diese Seite */

.impressionen-header.sub-header {
  padding-bottom: 28px;
}

.art-grid--impressions {
  gap: clamp(12px, 2vw, 22px);
  padding-top: 6px;
  padding-bottom: clamp(2rem, 6vw, 4rem);
  background:
    radial-gradient(ellipse 85% 55% at 18% 12%, rgba(156, 132, 104, 0.09), transparent 52%),
    radial-gradient(ellipse 70% 45% at 88% 65%, rgba(89, 78, 62, 0.06), transparent 48%);
}

.art-grid--impressions .art-item {
  border-radius: 14px;
  box-shadow:
    0 12px 36px rgba(28, 22, 16, 0.14),
    0 1px 0 rgba(255, 252, 247, 0.35) inset;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.art-grid--impressions .art-item:hover {
  box-shadow:
    0 18px 44px rgba(28, 22, 16, 0.18),
    0 1px 0 rgba(255, 252, 247, 0.45) inset;
}

.art-grid--impressions .art-item--impression:nth-child(8n + 1) {
  transform: rotate(-0.35deg);
}

.art-grid--impressions .art-item--impression:nth-child(8n + 4) {
  transform: rotate(0.28deg);
}

.art-grid--impressions .art-item--impression:nth-child(8n + 7) {
  transform: rotate(-0.22deg);
}

.art-grid--impressions .art-item--impression:hover {
  transform: rotate(0deg) scale(1.01);
}

/* Mosaik-Spannen (12er-Raster), Zyklus im JS */
.imp-span-a { grid-column: span 8; }
.imp-span-b { grid-column: span 4; }
.imp-span-c { grid-column: span 5; }
.imp-span-d { grid-column: span 7; }
.imp-span-e { grid-column: span 6; }
.imp-span-f { grid-column: span 6; }
.imp-span-g { grid-column: span 7; }
.imp-span-h { grid-column: span 5; }
.imp-span-i { grid-column: span 12; }
.imp-span-j { grid-column: span 4; }

.art-grid--impressions .imp-span-a .art-item-visual { aspect-ratio: 16 / 10; }
.art-grid--impressions .imp-span-b .art-item-visual { aspect-ratio: 3 / 4; }
.art-grid--impressions .imp-span-c .art-item-visual { aspect-ratio: 4 / 5; }
.art-grid--impressions .imp-span-d .art-item-visual { aspect-ratio: 7 / 5; }
.art-grid--impressions .imp-span-e .art-item-visual { aspect-ratio: 1 / 1; }
.art-grid--impressions .imp-span-f .art-item-visual { aspect-ratio: 5 / 6; }
.art-grid--impressions .imp-span-g .art-item-visual { aspect-ratio: 3 / 2; }
.art-grid--impressions .imp-span-h .art-item-visual { aspect-ratio: 5 / 7; }
.art-grid--impressions .imp-span-i .art-item-visual { aspect-ratio: 21 / 9; }
.art-grid--impressions .imp-span-j .art-item-visual { aspect-ratio: 3 / 4; }

@media (max-width: 900px) {
  .art-grid--impressions .art-item[class*="imp-span-"] {
    grid-column: span 6;
  }

  .art-grid--impressions .imp-span-i .art-item-visual {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 768px) {
  .art-grid--impressions .art-item[class*="imp-span-"],
  .art-grid--impressions .art-item.imp-span-i {
    grid-column: span 12;
    transform: none !important;
  }

  .art-grid--impressions .art-item--impression:hover {
    transform: scale(1.008) !important;
  }

  .art-grid--impressions .imp-span-i .art-item-visual {
    aspect-ratio: 4 / 3;
  }
}