#events-page .event-description {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 3.2rem;
    margin-bottom: 8px;
}

#events-page .event-date {
    color: #5F2550;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2.4rem;
}

#events-page .event-location {
    color: #5F2550;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
}

#events-page .table,
#events-page .table > tbody > tr > td,
#events-page .table > thead > tr > th {
    border: none !important;
}

#events-page .table > tbody > tr:hover {
    background-color: transparent !important;
    cursor: default;
}


#events-page table.m-b-md-i td,
#events-page table.m-b-md-i th {
    vertical-align: middle;
}

#events-page .container .row hr {
    padding: 0 8px;
}

#events-page .hr-wrapper {
    padding: 0 8px; /* space around the hr */
}

#events-page .event-button {
    padding: 12px 22px;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.14px;
    float: right;
}

#events-page .event-view-info-btn {
    border: 2px solid #5F2550;
}

#events-page .event-register-btn {
    background-color: #5F2550;
    border: 2px solid #5F2550;
    color: #FFF;
}

#events-page .table > tbody > tr > td.w30 {
    width: 30%;
}

#events-page .table > tbody > tr > td.w20 {
    width: 20%;
}

@media (max-width: 768px) {
    #events-page .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #events-page .row {
      margin-left: -10px;
      margin-right: -10px;
    }

    #events-page table.m-b-md-i tr {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Date | Location */
        gap: 8px 12px;
        align-items: start;   
    }

    /* Undo Bootstrap table widths */
    #events-page table.m-b-md-i th,
    #events-page table.m-b-md-i td {
        width: auto !important;
        min-width: 0;
        white-space: normal;
    }

    /* Header rows span both columns */
    #events-page table.m-b-md-i thead tr > th {
        grid-column: 1 / -1;
    }

    /* Date in first col, location in second col */
    #events-page table.m-b-md-i td.event-date {
        grid-column: 1;
    }

    #events-page table.m-b-md-i td.event-location {
        grid-column: 2;
        text-align: right;
    }

    /* Action cells: put them in a flex container */
    #events-page table.m-b-md-i tr {
        /* wrap so buttons can go side-by-side or full-width */
    }

    /* Wrap action cells full-width by default */
    #events-page table.m-b-md-i td.action-cell {
        grid-column: 1 / -1;
        padding-top: 4px;
        padding-bottom: 8px;
    }

    /* Make buttons full-width by default */
    #events-page .event-button,
    #events-page .btn-checkin {
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px 12px;
        margin-top: 4px;
    }

    /* If the row has exactly two action cells, split them 50/50 */
    #events-page table.m-b-md-i tr.has-two-actions td.action-cell {
        grid-column: span 1; /* each gets one column */
    }

    #events-page table.m-b-md-i tr.has-two-actions .event-button,
    #events-page table.m-b-md-i tr.has-two-actions .btn-checkin {
        width: 100%; /* still fill their half */
    }
}