/*HOMEPAGE - section that displays the categories and their images*/

.categories-container .col-xs-12 {
    margin-bottom: 5vh;  /* space BELOW each card */
}
.categories-container .card {
    margin-left: 1vw;    
    margin-right: 1vw;
}



.home-category-image-frame {
    position: relative;
    width: 100%;              /* fill the card width */
    max-width: 100%;
    aspect-ratio: 649 / 434;  /* keep same shape for all */

    /*background-image: url('/images/site/categories/product_cat_background_template.svg');*/
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
    /*background-position: center;*/
    
    background-color: #ebf3fa;
    background-color: #f2f7fa;
    background-color: #f2f5f7;
    border-top: 3px solid #ffffff;  
    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.home-category-image-frame::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 6%;          
    background-color: #ffffff;
    z-index: 0;            
}


/* category image on top of the background */
.home-category-image-frame img {
    max-width: 105%;
    max-height: 105%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    z-index: 1;
}

/* DISABLED: This breaks the homepage category grid*/
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-left: 0;
}

.caption.category-caption {
    font-size: 2rem;
    font-weight: bold;
    color: black;
    text-decoration: none;
    margin-top: 2rem;
}






/*
.home-category-image-frame {
    position: relative;
    width: 25vw;              
    aspect-ratio: 649 / 434;  /* keeps the area proportional
    
    background-image: url('/images/site/categories/product_cat_background_template.svg');
    background-size: contain;     /* scale the frame to fit 
    background-repeat: no-repeat;
    background-position: center;

    display: flex;                /* center the inner category image 
    align-items: center;
    justify-content: center;
}
*/


/* for the category image that sits on top of the background/frame */

/*
.home-category-image-frame img {
    max-width: 100%;       /* keep some padding to edges of frame 
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;  /* keep aspect ratio and fit inside 
    display: block;
}
*/