<div class="container pt-5 justify-content-center">
  <section>
    <div class="container py-3">
      <div class="card border-0">
        <div class="row">
          <div class="col-md-5 order-1 illo-container">
            <img src="{{ '/static/images/home/png/block-trackers@3x.png'|asseturl }}" class="" alt="{{ _("Block Trackers") }}" />
          </div>
          <div class="col-md-7 px-3 order-2">
            <div class="card-block px-3 py-5">
              <h4 class="pt-3 card-title text-primary">{{ _("BLOCK TRACKERS") }}</h4>
              <p class="card-text">{{ _("Tor Browser isolates each website you visit so third-party trackers and ads can't follow you. Any cookies automatically clear when you're done browsing. So will your browsing history.") }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="container py-3">
      <div class="card border-0">
        <div class="row">
          <div class="col-md-5 order-md-2 order-first illo-container">
            <img src="{{ '/static/images/home/png/surveillance@3x.png'|asseturl }}" class="" alt="{{ _("Defend Against Surveillance") }}" />
          </div>
          <div class="col-md-7 px-3 order-md-1">
            <div class="card-block px-3 py-5">
              <h4 class="pt-3 card-title text-primary">{{ _("DEFEND AGAINST SURVEILLANCE") }}</h4>
              <p class="card-text">{{ _("Tor Browser prevents someone watching your connection from knowing what websites you visit. All anyone monitoring your browsing habits can see is that you're using Tor.") }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="container py-3">
      <div class="card border-0">
        <div class="row">
          <div class="col-md-5 order-1 illo-container">
            <img src="{{ '/static/images/home/png/fingerprinting@3x.png'|asseturl }}" class="" alt="{{ _("Resist Fingerprinting") }}" />
          </div>
          <div class="col-md-7 px-3 order-2">
            <div class="card-block px-3 py-5">
              <h4 class="pt-3 card-title text-primary">{{ _("RESIST FINGERPRINTING") }}</h4>
              <p class="card-text">{{ _("Tor Browser aims to make all users look the same, making it difficult for you to be fingerprinted based on your browser and device information.") }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="container py-3">
      <div class="card border-0">
        <div class="row">
          <div class="col-md-5 order-md-2 order-first illo-container">
            <img src="{{ '/static/images/home/png/encryption@3x.png'|asseturl }}" class="" alt="{{ _("Multi-layered Encryption") }}" />
          </div>
          <div class="col-md-7 px-3 order-md-1">
            <div class="card-block px-3 py-5">
              <h4 class="pt-3 card-title text-primary">{{ _("MULTI-LAYERED ENCRYPTION") }}</h4>
              <p class="card-text">{{ _("Your traffic is relayed and encrypted three times as it passes over the Tor network. The network is comprised of thousands of volunteer-run servers known as Tor relays.") }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>
    <div class="container py-3">
      <div class="card border-0">
        <div class="row">
          <div class="col-md-5 order-md-2 order-first illo-container">
            <img src="{{ '/static/images/home/png/browse-freely@3x.png'|asseturl }}" class="" alt="{{ _("Browse Freely") }}" />
          </div>
          <div class="col-md-7 px-3 order-2">
            <div class="card-block px-3 py-5">
              <h4 class="pt-3 card-title text-primary">{{ _("BROWSE FREELY") }}</h4>
              <p class="card-text">{{ _("With Tor Browser, you are free to access sites your home network may have blocked.") }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
