  {% extends "theme.html" %} {% block body %}
  <div class="module module-gallery">
    <div class="container">
      <style>
        @media (min-width: 1px) {
          .container {
            max-width: 90%;
          }
        }
      </style>
      <div class="p-3 mb-2 bg-warning text-white">
        <div class="module-content">
          <h1 class="header" style=
          "color:white;padding-top: 45px;margin-bottom:30px;">
          Welcome to the</h1>
          <h1 class="headline text-center" style=
          "color:white;padding-top: 45px;margin-bottom:30px;">
          Mission Support System Collaboration Platform</h1>
        </div>
      </div>
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="rounded mx-auto d-block img-responsive" src="mss_theme/img/polstracc_2016.jpeg" width="592" alt="Polstracc 2016">
        </div>

          <div class="carousel-item">
            <img class="rounded mx-auto d-block img-responsive" src="mss_theme/img/emerge_2017.jpeg" width="592" alt="Emerge 2017">
          </div>
          <div class="carousel-item">
            <img class="rounded mx-auto d-block img-responsive" src="mss_theme/img/stratoclim_2017.jpeg" width="592" alt="Stratoclim 2017">
          </div>
          <div class="carousel-item">
            <img class="rounded mx-auto d-block img-responsive" src="mss_theme/img/wise_2017.jpeg" width="592" alt="Stratoclim 2017">
          </div>
          <div class="carousel-item">
            <img class="rounded mx-auto d-block img-responsive" src="mss_theme/img/southtrac_2019.jpeg" width="592" alt="Southtrac 2019">
          </div>
          <div class="carousel-item">
            <img class="rounded mx-auto d-block img-responsive" src="mss_theme/img/cirrus_hl_2021.png" width="592" alt="Cirrus HL 2021">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
    </div>{% endblock %}
  </div>
