.image-container {
    width: 100%;
    position: relative;
    overflow: hidden !important;
}

.image-container img {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden !important;
  z-index: 0;
  
}

/* Just styling the content of the div, the *magic* in the previous rules */
.image-container .caption {
  z-index: 1;
  position: relative;
  

}


.image-container-overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0.3)30%, rgba(0,0,0,0.7) 80%);
text-shadow: 2px 2px 15px rgba(0,0,0,1);
padding: 100px;
}

@media only screen and (max-width: 640px) {
.image-container-overlay {
padding: 20px;
}
}




.SubsectionWallpaper {
background-size: cover;	
background-repeat: no-repeat;
background-position: center center;
border-radius: 16px !important;
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.7);
}

.SubsectionOverlay {
background: linear-gradient(180deg, rgba(0,0,20,0.7) 0%, rgba(0,0,20,0.4) 50%, rgba(0,0,20,0.7) 100%);
padding: 20px;
border-radius: 16px !important;
text-shadow: 2px 2px 5px rgba(0,0,0,1) !important;
backdrop-filter: grayscale(25%) !important;
}