.events-list { padding: 30px 20px; } .events-list > div:first-child { margin: 0 auto; display: inline-grid; text-align: center; gap: 35px; } .events-list .event-list-item { text-align: left; overflow: hidden; display: flex; flex-flow: row nowrap; gap: 20px; } @media (min-width: 800px) { .events-list { padding: 30px 50px; } .events-list > div:first-child { grid-template-columns: 1fr 1fr; gap: 50px; } .events-list .event-list-item { max-width: calc(var(--max-width) / 2 - 25px); } } .elI-left { flex-shrink: 0; } .elI-left a { display: block; width: 120px; height: 120px; /*height: 100%; min-height: 120px; max-height: 200px;*/ background: rgba(0,0,0,0.08) none no-repeat center / cover; box-shadow: inset 0 0 2px rgba(0,0,0,0.2); border-radius: 3px; } .event-list-item.ended .elI-left a { filter: saturate(0%) brightness(95%) contrast(105%); } .elI-main { padding: 0 0 5px; overflow: hidden; } .elI-main h3 { margin: 0 0 10px; font-size: 1.1em; } .elI-main h3 .fav-control { margin: 3px 0 -3px 4px; } .elI-main .meta { display: flex; flex-flow: column; gap: 10px; font-size: 0.85em; } .elI-main .meta span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .elI-main .meta span .icon { margin: -1px 8px 1px 0; } .event-view {} .event-view h1 { line-height:1.25; margin-bottom: 10px; } .event-view h1 .fav-control { margin: 2px 0 -2px 5px; } .event-view .meta { margin: 0 0 20px; font-size: 0.8em; display: flex; flex-flow: row nowrap; gap: 20px; } .event-view .meta .icon { margin: -1px 5px 1px 0; } .event-view .gallery { margin-bottom: 20px; } .event-view .whenWhere { display: flex; flex-flow: row nowrap; gap: 8px; margin: 0 0 10px; font-size: 0.9em; } .event-view .whenWhere > .icon { margin: 3px 0 0; } .event-view .whenWhere > div { display: flex; flex-flow: row wrap; gap: 5px 5px; } .event-view .whenWhere > div span { white-space: nowrap; } .event-view .e-description { margin: 20px 0; padding: 10px 0 0; position: relative; } .event-view .e-description::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--clr-text); opacity:0.25; } .event-view .e-description h2 { margin: 20px 0 15px; } .event-view .e-description h3 { margin: 20px 0 15px; } .event-view .e-description blockquote { margin:10px 0; padding:5px 0 5px 15px; font-size:0.9em; position:relative; } .event-view .e-description blockquote + blockquote { margin-top:-10px; padding-top:10px; } .event-view .e-description blockquote::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--clr-text); opacity:0.5; } .event-view .e-embed { margin: 0 0 20px; } .event-view .e-embed > * { max-width: 100%; } .event-view .e-description a { color: var(--clr-link); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; } .event-view .e-description a:active, .event-view .e-description a:active { text-decoration: underline; } .event-view .e-contacts { margin: 20px 0; } .event-view .e-contacts div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .event-view .e-contacts div em.icon { margin:-2px 8px 0 0; } .event-view .share { margin: 25px 0 0; padding: 20px 0 0; position: relative; } .event-view .share::before { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--clr-text); opacity:0.25; } .event-view .share h3 { margin: 0 0 15px; } .event-view .share .button { margin: 0 10px 10px 0; } .eventFree { color:#038666; } .eventPaid { color:#c84570; } @media (prefers-color-scheme: dark) { .eventFree { color:#159777; } .eventPaid { color:#d2577f; } } .eventPaid .textlink { color:inherit; }