#comfort .photo-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  grid-template-rows: repeat(2, auto);
  gap: clamp(0.5rem, 2vw, 2rem);
  max-width: 100%;
  margin: 0 auto;
}

#comfort .photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border: none;
}

/* Large screen layout */
#comfort .left {
  grid-column: 1;
  grid-row: 1 / span 2;
}

#comfort .right {
  grid-column: 3;
  grid-row: 1 / span 2;
}

#comfort .top {
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 1 / 1;
}

#comfort .bottom {
  grid-column: 2;
  grid-row: 2;
  aspect-ratio: 1 / 1;
}

/* Medium screens: vertical stack 1 → 2 → 1 */
@media (max-width: 768px) {
  #comfort .photo-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  #comfort .left {
    grid-column: 1 / -1;
    grid-row: 1;
    order: -3; /* ensure it's first */
  }

  #comfort .top {
    grid-column: 1;
    grid-row: 2;
    order: -2;
  }

  #comfort .bottom {
    grid-column: 2;
    grid-row: 2;
    order: -1;
  }

  #comfort .right {
    grid-column: 1 / -1;
    grid-row: 3;
    order: 0;
  }
}

/* Small screens: single column top-to-bottom */
@media (max-width: 480px) {
  #comfort .photo-grid {
    grid-template-columns: 1fr;
  }

  #comfort .left,
  #comfort .top,
  #comfort .bottom,
  #comfort .right {
    grid-column: auto;
    grid-row: auto;
  }

  #comfort .left { order: -3; }
  #comfort .top { order: -2; }
  #comfort .bottom { order: -1; }
  #comfort .right { order: 0; }
}