# mobile fixes for main pages
:root {}

img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 576px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card {
    margin-bottom: 16px;
  }

  .display-3,
  .display-4 {
    font-size: 2rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .lead {
    font-size: 1rem;
  }

  .row > [class^="col-"] {
    margin-bottom: 16px;
  }

  .navbar-brand img,
  .logo-img {
    max-height: 48px;
    height: auto;
  }
}