:root{--columns:4;--text:#fff;--muted:#bbb;--accent:#a855f7;--radius:14px;--transition-speed:0.45s;--transition-ease:cubic-bezier(0.4,0,0.2,1)}.grid{flex-wrap:wrap;gap:20px;width:100%}.card,.grid{display:flex}.card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;flex-direction:column;color:var(--text);transition:flex-basis var(--transition-speed) var(--transition-ease),height var(--transition-speed) var(--transition-ease),box-shadow var(--transition-speed) var(--transition-ease);will-change:flex-basis,height}.card-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:object-position var(--transition-speed) var(--transition-ease),height var(--transition-speed) var(--transition-ease)}.card:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1;transition:background var(--transition-speed) var(--transition-ease)}.card--expanded:before{background:rgba(0,0,0,.35)}.card:after{content:"";position:absolute;bottom:12px;right:12px;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.6);opacity:.7;transition:background var(--transition-speed) var(--transition-ease),opacity var(--transition-speed) var(--transition-ease)}.card--expanded:after{background:#fff}.card__body{position:relative;z-index:2;max-width:96%;margin:auto auto 0;padding:16px 8px}.card__title{position:relative;margin:0 0 5px;font-size:1.2rem;font-weight:700;width:-moz-fit-content!important;width:fit-content!important;text-align:start!important}.card__extra{opacity:0;transform:translateY(10px);transition:transform var(--transition-speed) var(--transition-ease),opacity var(--transition-speed) var(--transition-ease),max-height var(--transition-speed) var(--transition-ease);margin-top:10px;max-height:0;overflow:hidden}.card--expanded .card__extra{opacity:1;transform:translateY(0);max-height:500px}@media (min-width:769px){.grid{display:flex;flex-wrap:nowrap;gap:20px;align-items:stretch}.card{min-height:500px;transform-origin:right center;flex-grow:0;flex-shrink:0;flex-basis:calc(18% - 15px);height:500px;transition:flex-basis 1s var(--transition-ease),height .6s var(--transition-ease),box-shadow .3s ease}.card--expanded{flex:1 1 auto;height:500px;width:auto}.card:not(.card--expanded) .card-img{object-position:center;transition:object-position .6s var(--transition-ease)}.card--expanded .card-img{object-position:center center}}@media (max-width:768px){.grid{display:block}.card{width:100%;margin-bottom:15px;height:auto;min-height:100px;transform-origin:top center;transition:height var(--transition-speed) var(--transition-ease),box-shadow .3s ease}.card:not(.card--expanded) .card-img{object-position:top center}.card--expanded .card-img,.card:not(.card--expanded) .card-img{height:100%;transition:height var(--transition-speed) var(--transition-ease),object-position var(--transition-speed) var(--transition-ease)}.card--expanded .card-img{object-position:center center}@keyframes pulse{0%{transform:scale(1);opacity:.7}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:.7}}.card:after{animation:pulse 1.8s ease-in-out infinite}}.glowTitle{color:white!important;font-family:Merienda,cursive;animation-name:glow;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate;-webkit-border-start:5px solid;border-inline-start:5px solid;border-color:#6c33d9}@keyframes glowBox{0%{box-shadow:0 0 1px #3366ff,0 0 1px #6c33d9}to{box-shadow:0 0 5px #3366ff,0 0 5px #6c33d9}}