/* Hero logo centering and shadow */
img.hero {
  display: block;
  margin: 2rem auto;
  max-width: 420px;
  height: auto;
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.15));
}

video.hero-video {
  display: block;
  width: 100%;
  max-width: 1100px;
  border-radius: 10px;
}

.md-content img:not(.hero) {
  border: 1px solid #d0d0d0;
  border-radius: 4px;
}

@media (max-width: 480px) {
  img.hero {
    width: 80%;
  }
}

/* Reduce sidebar width at mid-range viewports to prevent content squeeze */
@media screen and (min-width: 1220px) and (max-width: 1440px) {
  .md-sidebar--primary {
    width: 220px;
  }
}