.my-event-item-container { 
    max-width: 1008px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 5px;
    text-align: left; 
    padding: 10px 20px 5px 20px;
    border-radius: 32px; 
    position: relative; 
    transition: background-color 0.3s ease;
}


/* Standaard voor mobiel: alles netjes onder elkaar */
.my-event-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Iets kleinere gap op mobiel is vaak mooier */
}

/* Verberg de separators op mobiel (optioneel, maar aanbevolen) */
.my-event-item> :nth-child(2),
.my-event-item> :nth-child(4) {
    display: none;
}

.my-event-date-container {
    text-align: left; 
    color: #825184;
}

 .my-event-weekdag {
        text-transform: uppercase; 
        font-size:1.1rem;        
    }

 .my-event-dagnummer {
        font-weight:600;
        font-size: 1.5rem;
        line-height:1.2;
    }

 .my-event-time {
    color: #825184;
    font-size: 1.1rem;
    }

  .my-event-titel {
    font-size: 1.8rem; 
    font-weight: 600; 
    line-height:1.2; 
    margin-top: 0px;
    margin-bottom: 5px;;
    font-family: poppins;
  } 

  .my-event-titel a:hover {
  /*  color: #825184;*/
    text-decoration: none;
  } 

  .my-event-titel a {
    text-decoration: none;
}

/*hierdoor wordt de hele container een link naar de event-pagina
  de event-item-container moet dan position: relative; hebben*/
.my-event-titel a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1; /* Zorgt dat de onzichtbare laag bovenop ligt */
}

.my-event-item .separator {
    background: #825184;
    width: 1px;
    margin-bottom: 5px;

}

.my-event-toelichting {
    padding-bottom: 5px; 
    align-self: end;
  }

.maand-titel {
    color: white; 
    text-align: left; 
    font-weight: 700; 
    padding-left: 25px;
    margin-bottom: 10px;
    text-transform: uppercase;
}


/* Vanaf een tablet/desktop (breder dan 768px): activeer het grid */
@media (min-width: 768px) {
    .my-event-item {
        display: grid;
        grid-template-columns: 120px 1px calc(50% - 185.5px) 1px calc(50% - 32.5px);
        gap: 2rem;
    }

    /* Toon de separators weer op grotere schermen */
    .my-event-item> :nth-child(2),
    .my-event-item> :nth-child(4) {
        display: block;
        background-color: #ccc;
        /* Zorg dat ze een kleur hebben om zichtbaar te zijn */
    }
    .my-event-date-container {
    text-align: right; 
    }

    .maand-titel {
        text-align: right; 
        padding-right: 100px;
        max-width: 1008px; 
        margin-left: auto; 
        margin-right: auto; 
    }
    .my-event-item-container:hover {
        background-color: #f6f1e5 !important;
    }
}