main.css

.visually-hidden { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; }

.margin0 { margin: 0; }

html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

.page { font-family: Arial, Helvetica, sans-serif; height: 100vh; padding: 0.5rem 0; }

.header { text-align: center; }

.header-title { margin-bottom: 1rem; }

.container { height: inherit; padding: 1rem; display: grid; grid-template-columns: minmax(150px, 200px) 1fr; grid-gap: 1rem; }

/* Section (event) */
.event { border: 1px solid #009; display: flex; margin-bottom: 1rem; padding: 0.5rem; }

.event-description-wrapper { flex: 3; margin-right: 1rem; }

.event-characteristics-wrapper { flex: 1; }

.event-characteristics { text-align: right; }

/* Aside (filter) */
.filters-wrapper { border: 1px solid #333; display: flex; flex-direction: column; height: 300px; justify-content: space-between; padding: 1rem; }

.type-filter { display: flex; justify-content: space-between; }

.type-filter:not(:last-child) { margin-bottom: 1rem; }

label[for="date-filter"] { display: block; margin-bottom: 0.3rem; }

.apply-filter { all: unset; background-color: #c79b9b; border-radius: 5px; box-sizing: inherit; cursor: pointer; font-weight: 500; padding: 0.4rem; text-align: center; transition: background-color 0.5s ease; width: 100%; }

.apply-filter:hover { background-color: #cf8c8c; }