.whats-happening-container {margin-top: var(--v90);}
.whats-happening-container .content{display: flex;gap:3px;}
.whats-happening-container h2{font-weight: 700;margin: 0 0 30px;}
.whats-happening-container .card{position: relative;overflow: hidden;transition: all 0.3s ease-in-out}
.whats-happening-container .card img{display: block;opacity: 0.25;transition: opacity 0.3s ease-in-out}
.whats-happening-container :is(.card.is-open, .card:hover) img{opacity: 1}
.whats-happening-container .copy{padding: 20px 20px 30px;background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 85%);position: absolute;bottom: 0;width: 100%;}
/*.whats-happening-container .card:has(img) .copy :where(h3, p){display: none !important;}*/
.whats-happening-container .copy *{color: #fff;}
.whats-happening-container p{line-height: 1.3;}
.whats-happening-container .date{margin: 0 0 7px;text-transform: uppercase;/*font-size: 10px;*/}
.whats-happening-container h3{margin: 0;font-weight: 700;font-size: 1.5rem;transition: all 0.2s ease-in-out;}
.whats-happening-container .blurb {display: grid;text-decoration: none;overflow: hidden;transition: all 0.3s ease-in-out;position: relative;grid-template-rows: 0fr;}
.whats-happening-container .blurb svg{opacity: 1;transition: opacity 0.3s ease-in-out;vertical-align: middle;margin-left: 7px;/*position: absolute;right: 0;top:50%;margin-top: -8px;*/}
.whats-happening-container .card:not(.is-open) .blurb{pointer-events: none}
.whats-happening-container .card:not(.is-open) .blurb svg{opacity: 0;}
.whats-happening-container .blurb div{min-height: 0;}
.whats-happening-container .blurb div::-webkit-scrollbar-track{background-color:#f5f5f5;-webkit-box-shadow:inset 0 0 3px #0000004d}
.whats-happening-container .blurb div::-webkit-scrollbar-thumb{-webkit-border-radius:3px;border-radius:3px;background:var(--tertiary);}
.whats-happening-container .blurb div::-webkit-scrollbar{width:3px}
.whats-happening-container .card.is-open .blurb{grid-template-rows: 1fr;}
.whats-happening-container .blurb p{margin: 0;}
.whats-happening-container .blurb p.arrow{margin-top: 10px;text-align: right;position: relative;}
/*.whats-happening-container .blurb p.arrow svg{right: -30px;}
.whats-happening-container .blurb svg{position: absolute;right: 0;top: 50%;margin-top: -8px;}*/
.whats-happening-container .card:not(:has(img)) {background-color: #b2b2b2;}
.whats-happening-container .card:not(:has(img)):hover {background-color: var(--stellar-blue);}
@media (max-width:1023px){
.whats-happening-container .content{flex-direction: column;max-width: 600px;margin: 0 auto;gap:10px}
.whats-happening-container .card:not(.is-open) {aspect-ratio:2 / 1}
    .whats-happening-container .card:not(.is-open) img{width: 100%;height: 100%;object-fit: cover}
    .whats-happening-container .card:not(.is-open) h3{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
    .whats-happening-container .card.is-open:not(:has(img)) {aspect-ratio:108 / 135;}
    .whats-happening-container h2{text-align: center;}
}
@media (min-width:1024px){
    .whats-happening-container .card {transition: all 0.2s ease-in-out;height: 46.875vw;max-height: 800px;}
    .whats-happening-container .card.is-open{aspect-ratio:4 / 5;}
    .whats-happening-container .content:has(.card:nth-child(3):last-child) .card{width: 30%}
    .whats-happening-container .content:has(.card:nth-child(3):last-child) .card.is-open{width: 40%}
    .whats-happening-container .content:has(.card:nth-child(4):last-child) .card.is-open{width: 39.5%}
    .whats-happening-container .content:has(.card:nth-child(5):last-child) .card.is-open{width: 52.787%}
    .whats-happening-container .card:not(.is-open){width: 20%;}
    /*.whats-happening-container .card img{width: 100%;height: 100%;object-fit: cover;object-position: left}*/
    .whats-happening-container .card img{position: absolute;height: 100%;max-width: none;transition: all 0.2s ease-in-out;left: 0;width: 100%;object-fit: cover; object-position: left}
    /*.whats-happening-container .card:not(.is-open) img{left: 50%;transform: translateX(-50%)}
    .whats-happening-container .card.is-open .blurb, .whats-happening-container .blurb div{max-height: 300px;}*/
    .whats-happening-container .date{font-size: 1em;margin-bottom: 10px;}
    .whats-happening-container .card h3{font-weight: 600;font-size: 24px;line-height: 1.3;}
    .whats-happening-container .card.is-open h3{font-weight: 700;font-size: 32px}
    .whats-happening-container h2{padding-left: 100px;}
}
@media (min-width:768px) and (max-width:1199px){
    .whats-happening-container .container{max-width: 100%;}
}