.eventsAccordion {
    font-family: "EB Garamond";
    width:min(1400px,90vw) !important;
    height:400px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    gap: 1px;

    max-width: var(--wp--style--global--wide-size);

}

.eventsAccordion .panel {
    position:relative;
    flex:1;
    overflow:hidden;
    cursor:pointer;
    transition:flex .55s ease;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
	border-radius: 8px 8px 0px 0px;
}

.eventsAccordion .panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.90),
        rgba(0,0,0,.40),
        rgba(0,0,0,.25)
    );
}

.eventsAccordion .panel.open{
    flex:5;
    cursor: default;
}

.eventsAccordion .content{
    position:relative;
    z-index:1;
    color:white;
    padding:18px;
    width:100%;
}

.eventsAccordion .closed-content{
    transition:opacity .3s;
	position: absolute;
	line-height: 1.1;
	left: 15px;
	bottom: 15px;

}

.eventsAccordion .open-content{
    max-width:500px;
    opacity:0;
    transition:
        opacity .35s ease,
        transform .35s ease;
    /* position:absolute;
    left:30px;
    bottom:15px;*/
	text-align: center;
	margin-left: auto;
	margin-right: auto;
    width: 90%;
}

.eventsAccordion .panel.open .closed-content{
    opacity:0;
}

.eventsAccordion .panel.open .open-content{
    opacity:1;
    line-height: 1.2;
	position: relative;
    /*transform:translateY(0);*/
    transition-delay:.18s;
}

.eventsAccordion .closed-title{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    letter-spacing:2px;
    font-size:24px;
}

.eventsAccordion .closed-title-date {
    font-size: 20px;
}

.eventsAccordion .panel.open .closed-title{
    writing-mode:initial;
    transform:none;
    font-size:42px;
    margin-bottom:15px;
    overflow: hidden;
    text-wrap:nowrap;
    opacity: 0;
}

.eventsAccordion .open-content .display-date {
    font-size:34px;
    margin-bottom:0px;
    font-weight: normal;
}

.eventsAccordion .open-content .building, .eventsAccordion .open-content .city {
    font-weight: normal;
    font-size: 30px;
    padding: 0;
}

.eventsAccordion .open-content p {
    line-height:1.5;
    opacity:.9;
}

.eventsAccordion .open-content-info {
    width: 100%;
    margin-bottom: 10px;
}

.eventsAccordion .wp-block-button a, .eventsList .wp-block-button a {
    font-family: "Inter", sans-serif;
    box-shadow: 0 0 2px 0px #ffffff5c;
}


.eventsAccordion .numeral {
    position: absolute;
    top: 0.2em;
    text-align: center;
    width: 100%;
    color: #fff;
    font-size: 42px;
    opacity: 0.7;
    user-select: none; 
}

.eventsAccordion .theme_word {
	opacity: 0;
	transition: opacity 2s ease; /* will cause it to transition opacity changes */
	position: absolute;
    top: 2em;
    text-align: center;
    width: 100%;
    color: #fff;
    text-wrap: nowrap;
    font-size: 30px;
    letter-spacing: 3px;
    text-transform: uppercase;
    user-select: none;

}

.eventsAccordion .open .theme_word {
    opacity: 0.8; /* what opacity it has once open */
}

@media (max-width:900px){

    .eventsAccordion {
        flex-direction:column;
        height:auto;
    }

    .eventsAccordion .panel {
        height:120px !important;
        transition:height .45s ease;
		margin-bottom: 0.25em;
    }
	
	.eventsAccordion .panel .closed-content {
		left: 68px;
	}
	
	.eventsAccordion .panel .numeral {
		width: 1.7em;
		text-align: center;
	}
	
	.eventsAccordion .panel.open .numeral {
		width: 100%;
	}
	
	

    .eventsAccordion .panel.open {
        height:400px !important;
        flex:none;
    }
	
	.eventsAccordion .open-content {
		position:absolute;
	}
	
	.eventsAccordion .closed-content {
		position:relative;
	}

    .eventsAccordion .closed-title {
        writing-mode:initial;
        transform:translateY(15px);
    }

}



.eventsList .eventsListItem {
	padding-bottom: 1.8em;
}

.eventsList .numeral_theme_word {
    color: #fff;
    font-size: 30px;
    opacity: 0.7;
	width: 100%;
	text-align: center;
}
.eventsList .theme_word {
	letter-spacing: 3px;
    text-transform: uppercase;
}

.eventsList .numeral::after {
	content: ".";
}

.eventsList .eventListHeader {
	color: #fff;
	position: relative;
	padding: 0.25em;
	text-align: center;
	border-radius: 8px 8px 0px 0px;
	height: 300px;
	background-size: cover;
	background-position: 0% 50%; 
	display: flex;
	align-items: flex-end;
}

.eventsList .eventListHeader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85),
        rgba(0, 0, 0, 0)
    );
}


.eventsList .eventListHeaderText {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 1;
}

.eventsList .display-date {
	font-size: 42px;
}
.eventsList .city {
	font-size: 30px;
}
.eventsList .building {
	font-size: 30px;
}

.eventsList .eventListAfter {
	padding-top: 0.3em;
	padding-bottom: 0.4em;
}

.eventsList .open-content-info {
	padding-bottom: 0.5em;
}