/* Container events lijst */ .tribe-events-calendar-list > h2 { font-size: 20px; font-weight: 600; } /* Event container: flex row desktop */ .tribe-events-list-event { display: flex !important; align-items: center; gap: 3rem; margin-bottom: 5em; max-width: 100vw; } /* Datum + foto groep */ .tribe-event-date, .tribe-event-photo { display: inline-block; vertical-align: middle; } /* Datum: fixed width, gecentreerd */ .tribe-event-date { flex: 0 0 120px; font-size: 30px; font-weight: 900; text-align: center; color: #222; line-height: 1; user-select: none; } .tribe-event-date small { font-size: 0.85em; text-transform: uppercase; display: block; } /* Foto direct naast datum */ .tribe-event-photo { flex: 0 0 260px; margin-right: 2rem; max-width: 260px; } .tribe-event-photo img { width: 100%; height: auto; border-radius: 12px; display: block; } /* Info tekst: neemt resterende ruimte */ .tribe-event-details { flex: 1; line-height: 1.5; font-size: 1rem; } .tribe-event-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 0.5em 0; } .tribe-event-title a { color: #111; text-decoration: none; } .tribe-event-location { font-weight: 600; color: #555; margin-bottom: 0.7em; } .tribe-event-time { font-weight: 600; color: #777; } /* Lijntje tussen events behalve laatste */ .tribe-events-list-event:not(:last-child) { border-bottom: 1px solid #ddd; padding-bottom: 2em; margin-bottom: 4em; } /* Laatste event geen lijn en meer margin */ .tribe-events-list-event:last-child { border-bottom: none; margin-bottom: 6em; } /* Mobiel: stapel onder elkaar */ @media (max-width: 767px) { .tribe-events-list-event { flex-direction: column !important; align-items: flex-start !important; margin-bottom: 3em !important; gap: 1.5em !important; border-bottom: none !important; padding-bottom: 0 !important; } .tribe-event-date { flex: none !important; font-size: 30px !important; margin-bottom: 0.2em !important; text-align: left !important; } .tribe-event-photo { flex: none !important; width: 100% !important; max-width: 100% !important; } .tribe-event-details { flex: none !important; width: 100% !important; font-size: 1rem !important; line-height: 1.4 !important; } .tribe-event-title { font-size: 1.3rem !important; margin-bottom: 0.5em !important; } }