/**
 * CUSTOM CSS
 *
 * Here you can add your custom CSS code.
 */

 .hidden {
    display: none;
}


/**
 * PHOTO COLLAGE
 */
  .imagecollage {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-gap: 3px;
    max-width: 300px;
    height: auto;
  }
  .imagecol {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
   .three-photos {
    grid-column: span 2;
  }
  .photo-0 {
    grid-column: 1 / span 3;
  }
  .photo-1 {
    grid-column: 1 / span 2;
  }
  .photo-2 {
    grid-column: 3 / span 1;
    grid-row: span 2;
  }
  .photo-3 {
    grid-column: 1 / span 2;
  }

/**
 * YOUTUBE PHOTO OVERLAY
 */
.image-container-youtube {
    position: relative;
    width: 100%; /* Ensure the container spans the viewport width */
    max-width: 300px; /* Set a max width for the container */
    margin: 0 auto; /* Center the container horizontally */
	padding-bottom: 150px;
}

.background-image-youtube,
.overlay-image-youtube {
    width: 100%; /* Make both images responsive to the container width */
    height: auto; /* Maintain the aspect ratio of the images */
    position: absolute;
    top: 0;
    left: 0;

}

.overlay-image-youtube {
    /* Position the overlay image wherever you want on the background */
    /* Example: Center the overlay image */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -30%); /* Center it exactly in the middle */
    /* You can adjust the top, left, and transform properties as needed */
	/* display:block; 
	display:none;
	*/
}