<div class="container mx-auto" id="connect-container">
  <h2 class="text-center">LET'S CONNECT</h2>

  <div class="row row-gap-3 mt-3 justify-content-center">
    <div class="col-lg-2 col-md-3 col-sm-4 text-center">
      <div class="card" id="location-card">
        <a
          class="mt-2"
          href="https://www.google.com/maps/place/Tampa,+FL/@28.0074191,-82.5188431,11z/"
        >
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #333333"
            ></i>
            <i
              class="fa-solid fa-map fa-stack-1x fa-inverse"
              style="color: #333333"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <p class="card-title">TAMPA, FL</p>
        </div>
      </div>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 text-center">
      <div class="card" id="linkedin-card">
        <a class="mt-2" href="https://www.linkedin.com/in/dillardm">
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #333333"
            ></i>
            <i
              class="fa-brands fa-linkedin-in fa-stack-1x fa-inverse"
              style="color: #333333"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <p class="card-title">LINKEDIN</p>
        </div>
      </div>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 text-center">
      <div class="card" id="github-card">
        <a class="mt-2" href="https://www.github.com/dillardm89">
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #333333"
            ></i>
            <i
              class="fa-brands fa-github fa-stack-1x fa-inverse"
              style="color: #333333"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <p class="card-title">GITHUB</p>
        </div>
      </div>
    </div>

    <div class="col-lg-2 col-md-3 col-sm-4 text-center">
      <div class="card" id="email-card">
        <a class="mt-2" href="mailto:mail@mariannedillard.com">
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #333333"
            ></i>
            <i
              id="connect-envelope"
              class="fa-solid fa-envelope fa-stack-1x fa-inverse"
              style="color: #333333"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <p class="card-title">EMAIL</p>
        </div>
      </div>
    </div>
  </div>

  <div class="text-center mt-3">
    <a class="btn light-btn" href="#navigation">RETURN TO TOP</a>
  </div>
</div>
