.hero{background:var(--green--light);display:grid;grid-template-columns:1fr;grid-template-rows:var(--logo-height) 1fr;width:100vw;padding:2rem;height:calc(100svh - var(--nav-height));transition:height .25s ease-in-out;--logo-height:130px}@media only screen and (max-width:720px){.hero{--logo-height:100px}}.hero .logo{margin:auto;height:var(--logo-height);width:auto}.wrap-image{width:100%;height:calc(100dvh - var(--logo-height) - var(--nav-height));display:flex;align-items:center;justify-content:center}.wrap-image img,.wrap-image video{width:auto;height:60%;object-fit:contain;max-width:80%;top:-50px;position:relative}