/* Step 2 photo strip: the cover on the left, the hotel's own other photos on
   the right. Layout adapts to how many photos the hotel has (data-count). */
.room-photo-gallery .room-photo-small{background-image:var(--tile-image)}
.room-photo-gallery .room-photo-small.empty{display:none}
.room-photo-gallery[data-count="0"]{grid-template-columns:1fr}
.room-photo-gallery[data-count="1"] .room-photo-small:not(.empty){grid-column:2;grid-row:1/3}
.room-photo-gallery[data-count="1"]{grid-template-columns:1.8fr 1fr}
.room-photo-gallery[data-count="2"]{grid-template-columns:1.8fr 1fr}
.room-photo-gallery[data-count="2"] .room-photo-small:nth-child(2){grid-column:2;grid-row:1}
.room-photo-gallery[data-count="2"] .room-photo-small:nth-child(3){grid-column:2;grid-row:2}
.room-photo-gallery[data-count="3"] .room-photo-small:nth-child(2){grid-column:2;grid-row:1}
.room-photo-gallery[data-count="3"] .room-photo-small:nth-child(3){grid-column:2;grid-row:2}
.room-photo-gallery[data-count="3"] .room-photo-small:nth-child(4){grid-column:3;grid-row:1/3}
@media(max-width:700px){
  .room-photo-gallery[data-count]{grid-template-columns:1fr 1fr;grid-template-rows:190px 100px}
  .room-photo-gallery[data-count="0"] .room-photo-main{grid-row:1/3}
  .room-photo-gallery[data-count] .room-photo-small:not(.empty){grid-column:auto;grid-row:auto}
}