#previous_events_section{
    padding: 20px 0 0 0;
}

#next_events_section{
    padding: 20px 0 0 0;
}
.next_events_container{
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    max-width: var(--my-media-max-width);
    margin: 0 auto;
}
.next_events{
    position: relative;
    width: 325px;
    padding: 20px 20px;
    /* background-color: var(--secondary-color); */
    background-image: url("../Images/metal_cards.png");
    background-repeat: repeat;
    background-size: auto;
    display: flex;
    flex-direction: column;
    justify-content: top;
    color: var(--secondary-text-color);
}
.next_event_label{
    position: relative;
    height: 110px;
    display: block;
    z-index: 0;
}

.no-linebreak{white-space: nowrap;}

.next_events a{
    width: 100px;
    background-color: var(--main-brand-color);
    padding: 8px 15px;
    border-radius: 15px;
    color: var(--primary-color);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-size-adjust: none;
    white-space: nowrap;
    margin: 30px auto;
    border: 4px solid var(--main-brand-color);
    box-shadow: var(--shedow-3D);
    transition: 100ms ease-in-out;
    z-index: 1;
}
.next_events a:hover{
    background: var(--secondary-color);
    color: var(--main-brand-color);
}

@media print{
    #previous_events_section{padding: 5px 0 0 0;}
    
    #next_events_section{padding: 5px 0 0 0;}
    #previous_events_section{padding: 5px 0 0 0;}
    
    .next_events{
        width: 250px;
        font-size: 14px;
    }
    .next_events a{
        display: none;
    }
}

@media screen and (max-width: 800px){
    .next_events{
        width: 270px;
        max-width: 80%;
        padding: 15px 15px;
    }
    .next_event_label{height: min-content;}

    .next_events a{width: min-content;}
}
@-moz-document url-prefix() {
    @media screen and (min-width: 1024px) and (-moz-touch-enabled: 1) {
        .next_events_container{max-width: 95%;}
        
        .next_events{
            width: 230px;
            max-width: 90%;
        }
        .next_event_label{height: min-content;}

        .next_events a{width: min-content;}    
    }
    @media screen and (max-width: 260px) {
        .next_events_container{max-width: 95%;}
        
        .next_events{
            width: 230px;
            max-width: 90%;
            height: min-content;
        }
        .next_event_label{height: min-content;}

        .next_events a{width: min-content;}    
    }
  }