:root{--clr-neutral-900:hsl(207, 19%, 9%);--clr-neutral-100:hsl(0, 0%, 100%);--clr-accent-400:#f4900c}.hover-hint{display:none}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100vw,30ch),1fr));gap:2rem}.card{--transition-time:400ms;color:var(--clr-neutral-100);background-size:cover;background-position:0;padding:14rem 0 0;max-width:35ch;overflow:hidden;box-shadow:rgba(0,0,0,.16)0 1px 4px;display:grid;justify-content:center;align-items:flex-end}.card-content{width:100%;--padding:1.5rem;padding:var(--padding);background:linear-gradient(transparent,hsl(20 0% 0%/.3) 20%,#000)}.card-title{position:relative;width:max-content;font-size:2rem}.card-title::after{content:"";position:absolute;height:4px;width:calc(100% + var(--padding));left:calc(var(--padding) * -1);bottom:0;background:var(--clr-accent-400)}.card-body{margin-top:1rem;color:rgb(255 255 255/.8)}.underlined{text-decoration:underline}@media screen and (min-width:776px){.hover-hint{display:block;margin-bottom:1rem;opacity:.8}.card{background-position:50%;padding:10rem 0 0;transition:transform var(--transition-time)ease}.card:hover{transform:scale(1.03);box-shadow:rgba(50,50,93,.25)0 30px 60px -12px,rgba(0,0,0,.3)0 18px 36px -18px}.card-content{transform:translateY(100%)translateY(-5rem);transition:transform var(--transition-time)ease}.card:hover .card-content{transform:translateY(0)}.card-title::after{transform:scaleX(0);transform-origin:left;transition:transform var(--transition-time)ease}.card:hover .card-title::after{transform:scaleX(1)}}