/*--------------------------------------------------------------
Three photo layout - left sidebar portrait, right two stacked landscape
--------------------------------------------------------------*/
.photocontainer-sidebar-left {
    display:grid !important;
    gap: .25em !important;
    grid-template: "sidebar mainA" "sidebar mainB" / 3fr 4fr;
  }
  
  .photocontainer-sidebar-left :nth-child(1) {
    grid-area: sidebar;
    object-fit: cover;
    height: 100%;
  }
  
  .photocontainer-sidebar-left :nth-child(2) {
    grid-area: mainA;
    object-fit: cover;
    height: 100%;
  }
  
  .photocontainer-sidebar-left :nth-child(3) {
    grid-area: mainB;
    object-fit: cover;
    height: 100%;
  }

/*--------------------------------------------------------------
Three photo layout - left two stacked landscape, right sidebar portrait
--------------------------------------------------------------*/
.photocontainer-sidebar-right {
    display:grid !important;
    gap: .25em !important;
    grid-template: "mainA sidebar" "mainB sidebar" / 4fr 3fr;
  }
  
  .photocontainer-sidebar-right :nth-child(1) {
    grid-area: sidebar;
    object-fit: cover;
    height: 100%;
  }
  
  .photocontainer-sidebar-right :nth-child(2) {
    grid-area: mainA;
    object-fit: cover;
    height: 100%;
  }
  
  .photocontainer-sidebar-right :nth-child(3) {
    grid-area: mainB;
    object-fit: cover;
    height: 100%;
  }

/*--------------------------------------------------------------
Two photo layout - left portrait, right landscape
--------------------------------------------------------------*/
.photocontainer-portrait-landscape {
    display:grid !important;
    gap: .25em !important;
    grid-template-columns: 9fr 24fr; 
    justify-content: stretch;
    align-items: center;
  }
  
  .photocontainer-portrait-landscape img {
    height: 100%; /* Ensures both images have the same height */
    object-fit: cover; /* Maintains aspect ratio */
}

/*--------------------------------------------------------------
Two photo layout - left landscape, right portrait 
--------------------------------------------------------------*/
.photocontainer-landscape-portrait {
    display:grid !important;
    gap: .25em !important;
    grid-template-columns: 24fr 9fr; 
    justify-content: stretch;
    align-items: center;
  }
  
  .photocontainer-portrait-landscape img {
    height: 100%; /* Ensures both images have the same height */
    object-fit: cover; /* Maintains aspect ratio */
}