#events {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.tile {
    width: 240px;
    height: 450px;
    margin: 8px;
    background-color: transparent;
    -webkit-perspective: 2000px;
    perspective: 2000px;
    z-index: 0;
}

.tile img {
    width: 100%;
    aspect-ratio: 1;
    -o-object-fit: scale-down;
    object-fit: scale-down;
}

.flip {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform 0.6s;
    transition: -webkit-transform 0.6s;
    -o-transition: transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    color: var(--text-default);
    background-color: var(--bg-primary);
    -webkit-box-shadow: 0 4px 8px 0 var(--shd);
    box-shadow: 0 4px 8px 0 var(--shd);
}

.tile:hover .flip {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.frt, .bck {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bck {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    justify-content: center;
    flex-direction: column;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.bck * {
    max-width: 90%;
}

.bck p {
    margin: 10px;
}

.bck .menu {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.bck .menu ul {
    text-align: left;
}