.pw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 10px;
  margin-top: 88px;
}
.pw-grid .tile {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.pw-grid .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.pw-grid .tile:hover img {
  transform: scale(1.1);
}
.pw-grid .tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* text doprostřed */
.pw-grid .tile span {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(16px, 2vw, 22px);
  font-family: Arial, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}
/* overlay */
.pw-grid .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1;
}

/* layout na PC/tablet */
.pw-grid .parfemy { grid-row: 1 / span 2; grid-column: 1 / 2; }
.pw-grid .novinky { grid-row: 1 / 2;      grid-column: 2 / 3; }
.pw-grid .bodycare{ grid-row: 1 / 2;      grid-column: 3 / 4; }
.pw-grid .vune    { grid-row: 2 / 3;      grid-column: 2 / 3; }
.pw-grid .darkove { grid-row: 2 / 3;      grid-column: 3 / 4; }

/* === MOBILE ≥320px && <768px: 2 sloupce === */
@media (max-width: 768px) and (min-width: 320px) {
  .pw-grid { grid-template-columns: repeat(2, 1fr); }
  .pw-grid .parfemy { grid-column: 1 / 2; grid-row: 1 / span 2; }
  .pw-grid .novinky { grid-column: 2 / 3; grid-row: 1 / 2; }
  .pw-grid .bodycare{ grid-column: 2 / 3; grid-row: 2 / 3; }
  .pw-grid .vune    { grid-column: 1 / 2; grid-row: 3 / 4; }
  .pw-grid .darkove { grid-column: 2 / 3; grid-row: 3 / 4; }
}

/* === XS <320px: 1 sloupec === */
@media (max-width: 320px) {
  .pw-grid { grid-template-columns: 1fr; }
  .pw-grid .parfemy, 
  .pw-grid .novinky, 
  .pw-grid .bodycare, 
  .pw-grid .vune, 
  .pw-grid .darkove {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* === LARGE >1440px: 4 sloupce === */
@media (min-width: 1441px) {
  .pw-grid { grid-template-columns: repeat(4, 1fr); }

  .pw-grid .parfemy { grid-row: 1 / span 2; grid-column: 1 / 2; }
  .pw-grid .novinky { grid-row: 1 / 2;      grid-column: 2 / 3; }
  .pw-grid .bodycare{ grid-row: 1 / 2;      grid-column: 3 / 5; } /* přes 2 sloupce */
  .pw-grid .vune    { grid-row: 2 / 3;      grid-column: 2 / 4; } /* přes 2 sloupce */
  .pw-grid .darkove { grid-row: 2 / 3;      grid-column: 4 / 5; }
}