<style media="screen">
  @media only screen and (max-width: 1022px) {
    #desktop-format {
      display: none;
    }
  }

  @media only screen and (min-width: 1023px) {
    #mobile-n-tablet-format {
      display: none;
    }
  }
</style>

<div class="bg-gray-100 pl-12 bpg-arial-font text-gray-700">
  <br>
  <!-- version that appears in desktop-tablet mode -->
  <div class="flex justify-between" id="desktop-format">
    <img class="max-h-40 pt-2 pr-10 opacity-75" src="/images/ucs-logo.png" alt="UCS-Logo">
    <p class="text-2xl pt-16 pl-16 pr-8 mb-8">Founded in 2014, Urban Cruise Ship presents environmental solutions.</p>
  </div>


  <!-- version that appears in mobile mode -->
  <div id="mobile-n-tablet-format">
    <img class="max-h-40 pt-2 pr-10 opacity-75" src="/images/ucs-logo.png" alt="UCS-Logo">
    <p class="text-2xl pt-12 mb-8">Founded in 2014, Urban Cruise Ship presents environmental solutions.</p>
  </div>

  <div class="flex justify-between">
    <span class="text-2xl sm:text-5xl pt-12">Our specialized sites:</span>
  </div>
</div>
<div class="gap-2 justify-center grid lg:grid-cols-3 md:grid-cols-2 bg-gray-100 p-10">

  <a class="transform focus:scale-110 transition duration-300" href="http://urbancruiseship.org/site/energy" target="_blank">
    <span class="absolute text-purple-700 text-opacity-0 text-xs">energy production, distribution, and consumption</span>
    <img class="transform hover:scale-110 transition duration-300" src="/images/ucs-homepage-icons/energy.svg" alt="icon that is a link to the matter site">
  </a>

  <a class="transform focus:scale-110 transition duration-300" href="http://urbancruiseship.org/site/foodwater" target="_blank">
    <span class="absolute text-purple-700 text-opacity-0 text-xs">matter, food, water, and other consumables</span>
    <img class="transform hover:scale-110 transition duration-300" src="/images/ucs-homepage-icons/matter.svg" alt="icon that is a link to the matter site">
  </a>

  <a class="transform focus:scale-110 transition duration-300" href="http://urbancruiseship.org/site/habitat" target="_blank">
    <span class="absolute text-purple-700 text-opacity-0 text-xs">habitat, perspective and perception </span>
    <img class="transform hover:scale-110 transition duration-300" src="/images/ucs-homepage-icons/habitat.svg" alt="icon that is a link to the habitat site">
  </a>

  <a class="transform focus:scale-110 transition duration-300" href="http://urbancruiseship.org/site/cities" target="_blank">
    <span class="absolute text-purple-700 text-opacity-0 text-xs">cities, sustainable design principles </span>
    <img class="transform hover:scale-110 transition duration-300" src="/images/ucs-homepage-icons/cities.svg" alt="icon that is a link to the cities site">
  </a>

  <a class="transform focus:scale-110 transition duration-300" href="http://urbancruiseship.org/site/waste" target="_blank">
    <span class="absolute text-purple-700 text-opacity-0 text-xs">waste, zero waste methodology vs. scams </span>
    <img class="transform hover:scale-110 transition duration-300" src="/images/ucs-homepage-icons/waste.svg" alt="icon that is a link to the waste site">
  </a>

  <a class="transform focus:scale-110 transition duration-300" href="http://urbancruiseship.org/site/oceans" target="_blank">
    <span class="absolute text-purple-700 text-opacity-0 text-xs">oceans, health, resources, and energy </span>
    <img class="transform hover:scale-110 transition duration-300" src="/images/ucs-homepage-icons/oceans.svg" alt="icon that is a link to the oceans site">
  </a>

  <a class="transform focus:scale-110 transition duration-300" href="http://urbancruiseship.org/site/space" target="_blank">
    <span class="absolute text-purple-700 text-opacity-0 text-xs">space, human vs. robotic ventures </span>
    <img class="transform hover:scale-110 transition duration-300" src="/images/ucs-homepage-icons/space.svg" alt="icon that is a link to the cities site">
  </a>

  <a class="transform focus:scale-110 transition duration-300" href="http://urbancruiseship.org/site/internalization" target="_blank">
    <span class="absolute text-purple-700 text-opacity-0 text-xs">costs, internalized vs. subsidized </span>
    <img class="transform hover:scale-110 transition duration-300" src="/images/ucs-homepage-icons/costs.svg" alt="icon that is a link to the waste site">
  </a>

  <a class="transform focus:scale-110 transition duration-300" href="/topic/history/endeavors" target="_blank">
    <span class="absolute text-purple-700 text-opacity-0 text-xs">history, past and future progress</span>
    <img class="transform hover:scale-110 transition duration-300" src="/images/ucs-homepage-icons/history.svg" alt="icon that is a link to the oceans site">
  </a>

</div>
