:root{--white-color:#fff;--black-color:#000}.expand-card-container{flex-direction:column;row-gap:1.5rem;width:100%;height:600px;margin-top:1.5rem;margin-bottom:2rem;display:flex}.card__article{cursor:pointer;background:#1a1a1a;border-radius:2rem;flex:1;transition:flex .7s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 8px 24px #0006}.card__img,.card__shadow{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.card__img{object-fit:cover;object-position:center;opacity:.6;transition:transform .8s,opacity .4s}.card__shadow{background:linear-gradient(#0000 50%,#000000b3 100%)}.card__data{opacity:0;pointer-events:none;align-items:center;column-gap:1rem;transition:opacity .5s,transform .5s;display:flex;position:absolute;bottom:1.5rem;left:1.5rem;transform:translateY(1.5rem)}.card__icon{background-color:var(--white-color);width:48px;height:48px;color:var(--black-color);border-radius:50%;flex-shrink:0;place-items:center;font-size:1.5rem;display:grid}.card__title{color:var(--white-color);text-shadow:0 4px 8px #0009;margin:0;font-size:1.25rem;font-weight:800}.card__article.is-active{flex:8}.card__article.is-active .card__img{opacity:1}.card__article.is-active .card__data{opacity:1;transform:translateY(0)}.card__article:hover .card__img{transform:scale(1.1)}@media (min-width:768px){.expand-card-container{flex-direction:row;column-gap:1.5rem;height:500px}}