/* ===== FULL WIDTH BANNER XY ===== */
#banner-xy {
  width: 100vw;
  max-width: 100vw;

  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);

  padding: 0;
  background: #fff;
  overflow: hidden;
}

/* ===== GRID LAYOUT ===== */
#banner-xy .xy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;

  width: 100%;
  height: clamp(400px, 42vw, 800px);
}

/* ===== TILE ===== */
#banner-xy .xy-tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  background: #f5f5f5;
}

/* ===== IMAGE ===== */
#banner-xy .xy-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: translateZ(0);
}

/* ===== GRID POSITIONS ===== */
#banner-xy .xy-lt { grid-column: 1; grid-row: 1; }
#banner-xy .xy-lb { grid-column: 1; grid-row: 2; }
#banner-xy .xy-mid { grid-column: 2; grid-row: 1 / 3; }
#banner-xy .xy-rt { grid-column: 3; grid-row: 1; }
#banner-xy .xy-rb { grid-column: 3; grid-row: 2; }

/* ===== OVERLAY (jen ztmavení) ===== */
#banner-xy .xy-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#banner-xy .xy-tile:hover .xy-overlay {
  opacity: 1;
}