:root { --cte-bg-color: #f9e3c8; --cte-primary-color: #557e76; --cte-header-color: #525f7f; } .cte-events { background-color: var(--cte-bg-color); font-family: roboto, sans-serif; margin: 30px auto; font-weight: 300; line-height: 1.5; } .cte-events .cte-event { width: 100%; margin-bottom: 3em; } .cte-events /* .cte-event */ .cte-summary { display: grid; gap: 1.5rem; padding-right: 1.5rem; grid-template-columns: 1fr 4fr; grid-template-rows: auto; grid-template-areas: "image info"; /* position / z-index needed to have box-shadow over details collapsible */ position: relative; z-index: 2; box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15); word-wrap: break-word; background-color: #fff; background-clip: border-box; border-radius: .375rem; overflow: hidden; } .cte-events /* .cte-event .cte-summary */ .cte-image { grid-area: image width: 100%; } .cte-events /* .cte-event .cte-summary */ .cte-image img { width: 100%; height: 100%; object-fit: cover; vertical-align: middle; border-style: none; } .cte-events /* .cte-event .cte-summary */ .cte-info { grid-area: info } .cte-events /* .cte-event .cte-summary .cte-info */ .cte-info-header { color: var(--cte-header-color); fill: var(--cte-header-color); display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; flex-wrap: wrap; margin-bottom: .25rem; gap: .5rem; font-weight: 300; } .cte-events /* .cte-event .cte-summary .cte-info .cte-info-header */ .cte-date { } .cte-events /* .cte-event .cte-summary .cte-info .cte-info-header */ .cte-download {} .cte-events /* .cte-event .cte-summary .cte-info .cte-info-header */ .cte-download a { text-decoration: none; color: inherit; } .cte-events /* .cte-event .cte-summary .cte-info */ .cte-description { color: var(--cte-primary-color); } .cte-events /* .cte-event .cte-summary .cte-info */ .cte-description :is(h1, h2) { margin: 0; font-weight: 300; line-height: 1.5; } .cte-events /* .cte-event .cte-summary .cte-info */ .cte-description h2 { font-size: 1.0625rem; } .cte-events .cte-icon { width: 1em; height: 1em; vertical-align: -0.125em; } .cte-events /* .cte-event */ .cte-details-collapser { margin: 0 1rem; background: #fff; } .cte-events /* .cte-event */ .cte-details-collapser.collapsed { background: inherit; } .cte-events /* .cte-event */ .cte-details-collapser.collapsed .cte-details { display: none; } .cte-events /* .cte-event */ .cte-details-collapser .toggle-collapse { display: block; margin: auto; } .cte-events /* .cte-event */ .cte-details-collapser .toggle-collapse { height: 1.875rem; width: 13.25rem; color: var(--cte-primary-color); fill: var(--cte-primary-color); border-color: var(--cte-primary-color); background-color: var(--cte-bg-color); text-transform: none; letter-spacing: .025em; font-size: .875rem; gap: 0.5rem; align-items: center; justify-content: center; cursor: pointer; border-radius: .375rem; } .cte-events /* .cte-event */ .cte-details-collapser.collapsed .toggle-collapse { bottom: -1.775rem; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .cte-events /* .cte-event */ .cte-details-collapser:not(.collapsed) .toggle-collapse { bottom: 0; border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .cte-events /* .cte-event */ .cte-details-collapser .toggle-collapse:hover { background-color: var(--cte-primary-color); color: #fff; fill: #fff; border-color: var(--cte-primary-color); } .cte-events /* .cte-event .cte-details-collapser */ .cte-details { padding: 1.5rem; padding-bottom: 0; } .cte-events /* .cte-event .cte-details-collapser */ .cte-details .cte-information-group { display: flex; flex-direction: row; align-items: first baseline; flex-wrap: wrap; gap: 1.5rem; } .cte-events /* .cte-event .cte-details-collapser */ .cte-details :is(h1, h2, h3) { color: var(--cte-primary-color); margin: 0; font-weight: 300; line-height: 1.5; } .cte-events /* .cte-event .cte-details-collapser */ .cte-details h2 { font-size: 1.1rem; margin-top: .8rem; font-weight: bolder; }