.page-info{
    .btn{

        display: inline-block;
        border-radius: 3px;
        padding:.75em 1em;
        background:var(--whiteColor);
        position: relative;
        color:rgba(0,0,0,0.75);
        text-decoration: none;
        cursor:pointer;
        border:none;
        &:hover{
            filter:brightness(.9);
        }

    }


}
.upcoming{
    h1{
        color:var(--whiteColor);
        font-size:2em;
        font-family: var(--fontSans);
    }
    margin: 3em 0;
}


.past{
    h1{
        color:var(--whiteColor);
        font-size:2em;
        font-family: var(--fontSans);
    }
}



.list-top{
    display: flex;
    flex-flow:row wrap;
    gap:2em;
    justify-content: space-between;
    align-items: center;

}


.events-list{
    background-color: rgba(0,0,0,0.25);
    margin-top:1em;
}
.event-block{

    display: flex;
    flex-flow:row wrap;
    gap:0;
    border-left:.5em solid var(--whiteColor);

    background:rgba(255,255,255,.1);

    &:nth-of-type(odd){
        background:transparent;
        border-left:.5em solid rgba(255,255,255,.5);

    }

    > a {
        flex:0 0 100%;
        display: flex;
        flex-flow:row wrap;
        align-items: center;
        justify-content: flex-start;
        gap:.25em 1em;

        padding:1em .5em 1em 1em;
        background: rgba(0,0,0,0.3);
        border-bottom:1px solid rgba(255,255,255,.15);

        font-weight: 300;
        text-decoration: none;
        color:var(--whiteColor);

        &:hover{
            background:var(--linkColorAlt);
            color:#000;
        }

        .date{
            flex:0 0 100%;
            text-transform: uppercase;

        }

        > h2{
            font-weight:900;
            font-size:1.5em;

        }

        .location{
            font-weight: 100;
            font-style: italic;

        }

    }

}

.past .event-block a{
    color:rgb(136, 136, 136);

    &:hover{
        color:rgba(0,0,0,.5);
        background:rgba(255,255,255,.75);

    }
}