.aspect_16_9 {
    
    
    /* This class is a lie. Actually 1:1 ratio for the small screen, but 
        actually get to 16:9 at the next breakpoint. */
    padding-bottom: 100%; 
    position: relative;
}

.aspect_16_6 {

    
    /* This class is a lie. Actually 16:12 ratio for the small screen, but 
        actually get to 16:6 at the next breakpoint. */
    padding-bottom: 75%; 
    position: relative;
    max-height: 350px;
}

.aspect_16_4 {
   
    
    /* This class is a lie. Actually 16:9 ratio for the small screen, but 
        actually get to 16:4 at the next breakpoint. */
    padding-bottom: 60%; 
    position: relative;
    max-height: 200px;
}

@media(min-width:500px)
{   
    .aspect_16_9{
        
        padding-bottom: 56.25%;
        position: relative;
    }
    
    .aspect_16_6 {
       
        padding-bottom: 55%;
        position: relative;
    }
    
    .aspect_16_4 {
       
        padding-bottom: 45%;
        position: relative;
        max-height: 570px;
    }    

}

@media (min-width: 650px)
{
	
    /* This code determines when the general page hero stops growing in height */
    .aspect_16_4 {
        padding-bottom: inherit;
        height: 300px;
    }
    
    .aspect_16_6 {
        padding-bottom: 36%;
        position: relative;
    }
    
}

@media (min-width: 900px)
{
    /* This code determines when the homepage hero stops growing in height */
    .aspect_16_9 {
        padding-bottom: inherit;
        height: 506px;
    }
    
    .aspect_16_6 {
        padding-bottom: inherit;
        height: 600px;
    }
    
}