/* Styling for cards used throughout the site
--------------------------------------------- */


/*--- Vertical Post card--- */

.card{

 display:block;
}

.vertical-card{
    
 justify-self: center;
    
}


.post-image {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
}

.post-image > a{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.post-image > a > img{
    object-fit:contain;
    position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    
    }


   
   .update-image {
       width: 100%;
       padding-bottom: 56.25%;
       position: relative;
   }
   
   .update-image > a{
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
   }


.update-image > a > img{
object-fit:cover;
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

}

.update-text{
    width:95%;
}

.post-title{
    margin:0;
    color: inherit;
}

/* For new event-style card(s) */
.left-vr {
    border-left: var(--standard-border) solid;
    padding-left: var(--mp-3);
}

/*--- "Hero"" Post card (used on homepage under "On View" 
       and on Exhibition Pages--- */

.hero-image {
    width: 100%;
    padding-bottom: 66.66%;
    position: relative;
}

.hero-image > a{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


.hero-image > a > img{
object-fit:cover;
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

}



/* Event card image formatting */
.image-container {
    width: 100%;
    padding-bottom: 75%;
    position: relative;
}

.image-container  > a{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.image-container  > img{
    object-fit:contain;
object-position: 50% 5%;
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}


.image-container  > a > img{
object-fit:contain;
object-position: 50% 5%;
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

}

.image-cover{
    width: 100%;
    padding-bottom: 75%;
    position: relative;
}

.image-cover  > a{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


.image-cover > a > img{
object-fit:cover;
object-position: 50% 5%;
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;

}





/* Support Banner Block (templates-parts/support-banner.php) */

.banner-card{
	max-width: 1600px;
	padding: var(--mp-4);
}

.sticky-banner > .wrapper {
	max-width: 1600px;
	padding: var(--mp-4) 0;
}

@media screen and (max-width: 1600px) {

	.sticky-banner > .wrapper {
		margin: 0 var(--mp-4) !important;
	}

}

h4.support-banner {
    font-size: 1.75rem;
}

.sticky-banner{
    position:sticky;
    bottom:0;
    left:0;
    margin:0 !important;
}

.cookie-popup{
    display:none;
    position: sticky;
    bottom: 0;
    left: 0;
    margin: 0 !important;
}



/* temp CSS depository */