.hero{position:relative;display:block;width:95%;margin:0 auto;aspect-ratio:16/10.35;border-radius:12px;overflow:hidden;background:var(--md-default-bg-color,#f5efe0)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease;opacity:0}

/* Reveal the image once it has finished loading */
.hero.is-loaded img{opacity:1}

/* Centered spinner shown while loading */
.hero::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid rgba(0,0,0,.15);border-top-color:rgba(0,0,0,.45);animation:hero-spin 1s linear infinite;opacity:0;pointer-events:none}
.hero.is-loading::after{opacity:1}

/* Hide content below hero while image is loading */
.hero + .hero-content{opacity:0;transition:opacity .25s ease}
.hero.is-loaded + .hero-content{opacity:1}

/* Homepage download button */
.download-cta{margin:12px 0 24px}
.download-cta .md-button{font-size:1.05rem;padding:.75rem 1.25rem}
@media (min-width: 960px){
  .download-cta .md-button{font-size:1.15rem;padding:.85rem 1.5rem}
}

@keyframes hero-spin{to{transform:rotate(360deg)}}