Format Summary Block Mobile View Only

Site URL: https://www.firstblessing.org/2022-events-1

I've managed to get "buttons" on my event items in the event summary block and it looks great on desktop. However, on mobile (cellphone) the button text is too long for the column container and therefore wraps to a second line. On tablet view the button text is overlapping each other. I used line-height to adjust the spacing on the cellphone mobile view so that it wouldn't overlap but I'm not loving that it looks like 2 separate boxes. Looking for a way to either make the 'button' to span the full width of the screen on mobile OR to make the background box look like a single box with text wrapped inside. 

This is the code I'm using right now: 

 .summary-excerpt a {
    background-color: #333333 !important;
    color: white !important;
    font-size: 18pt;
    padding: 8px 10px;
    text-decoration: none;
    }
  @media screen and (max-width:640px) {
.summary-excerpt a {
   font-size: 12px !important;
   line-height: 2.8 !important;
}

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.summary-excerpt a {
    display: block;
}
}