.breadcrumb {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/images/event-bg.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.event-detail-page .content {
    display: grid;
    grid-template-columns: 5fr 2fr;
    grid-gap: 24px;
}

.event-detail-img img {
    width: 100%;
}

.event-name {
    margin: var(--m-16) 0;
}

.event-brief-info p {
    margin: 10px 0;
}

.more-events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    margin-top: 48px;
}

.event-detail-card {
    background-color: #fff;
    border-radius: 4px;
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); */
    padding: var(--m-16);
    margin-bottom: 24px;
}

.event-detail-card h3 {
    font-size: var(--sub-title);
    margin-bottom: var(--m-24);
}

.event-detail-card-body div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: var(--m-8);
}

.event-detail-card-body div p:first-child {
    font-weight: 500;
    margin-right: var(--m-16);
}



@media only screen and (max-width: 820px) {
    .event-detail-page .content {
        grid-template-columns: 1fr;
    }
    
    .event-detail-card {
        margin-bottom: 0;
    }

    .event-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-gap: var(--m-24);
    }
}