/* Mobile View */
@media screen and (max-width: 79.5rem){



}


/* Desktop View */
@media screen and (min-width: 79.5rem){


}


article section .foreground.event{
display:grid;
grid-template-areas:"title title"
"event-date text"
"event-date event-text"
"event-date event-info"
"asset asset";
grid-template-columns:3.5rem auto;
grid-column-gap:.5em;
border-bottom:var(--base-border-color) 1px solid;
}

article section .foreground.event .event-date{
grid-area:event-date;
margin:.5em 0 0 0;
height:auto;
}

.event-date{
display:block;
width:3rem;
position:relative;
overflow:hidden;
}

.event-date p{
width:3rem;
margin:0;
padding:.35rem 0;
top:0;
left:0;
position:relative;
z-index:2;
text-align:center;
background:var(--asset-background-color);
border:0px solid var(--light-border-color);
color:var(--dark-font-color);
}

.event-date p .day{
display:block;
padding:.15rem 0 0 0;
width:100%;
font-size:var(--l-font-size);
font-weight:bold;
line-height:var(--m-font-size);
}

.event-date p .month{
display:block;
width:100%;
font-size:var(--s-font-size);
font-weight:bold;
line-height:var(--m-font-size);
}

.event-date p .year{
display:block;
width:100%;
font-size:var(--m-font-size);
font-weight:bold;
line-height:var(--m-font-size);
}

article section .foreground.event .event-text{
grid-area:event-text;
}

/* Mobile View */
@media screen and (max-width: 79.5rem){

.event-info{
grid-area:event-info;
display:block;
width:100%;
margin:1.5rem 0;
padding:.5rem 0 0 0;
border-top:1px solid var(--base-border-color);
}

}

/* Mobile View > Tablet and Above */
@media screen and (min-width: 45rem){

.event-info{
grid-area:event-info;
display:flex;
justify-content:center;
align-items:normal;
width:100%;
margin:1.5rem 0;
padding:.5rem 0 0 0;
border-top:1px solid var(--base-border-color);
}

}

.event-location,
.event-organizer{
display:block;
width:100%;
}

.event-location p,
.event-organizer p{
margin:0;
padding:0;
}

.event-text p:first-of-type:before{
display:inline-block;
content:'';
height:.75em;
width:1em;
background:url('/asset/img/event/date.svg') no-repeat top left;
}

.event-text ul{
display:block;
width:100%;
margin:0;
padding:0;
}

.event-text ul{
list-style-type:none;
}

.event-text ul li:before{
display:inline-block;
content:'';
height:.75em;
width:1em;
background:url('/asset/img/event/list.svg') no-repeat top left;
}

.event-text ul li{
width:auto;
}

.event-text ul li em{
font-size:var(--s-font-size);
font-style:normal;
}