:root {
  --photos-width: min(80vw, 1400px);
  --photos-margin: auto;

  --cell-w: 18vw;
  --cell-h: 18vw;
  --gap: 1rem;
}

#photos-content {
  width: var(--photos-width);
  margin: 0 var(--photos-margin);
}

.box{
  position: relative;
  border-radius: 20px;
  overflow: hidden;  

  background-color: #989898;
  background-size: cover;        
  background-repeat: no-repeat;
  background-position: var(--pos, 50% 50%); 
  background-image: var(--bg, none);        
}

.rot-90  > img{ transform: rotate(90deg); }
.rot--90 > img{ transform: rotate(-90deg); }

.photos-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
  grid-auto-rows: 17vw;
  grid-auto-flow:dense;
}
.size-1x1{ grid-row:span 1; grid-column:span 1; }
.size-1x2{ grid-row:span 2; grid-column:span 1; }
.size-2x1{ grid-row:span 1; grid-column:span 2; }
.size-2x2{ grid-row:span 2; grid-column:span 2; }

.box .caption{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  padding: .5rem .75rem;
  background: rgba(255,255,255,.85); 
  transform: translateY(100%);
  transition: transform .25s ease;
  font-weight: 500;
  line-height: 1.2;
}

.box:hover .caption{
  transform: translateY(0);
}

.box::before{
  content:"";
  position:absolute; inset:0;
  background: inherit;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  transition: transform .35s ease;
  transform: scale(1);
}
.box:hover::before{
  transform: scale(1.03);
}

@media (max-width: 768px){
  .photos-grid{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 10rem; /* optional: smaller row height */
  }
}