{% extends 'base.html' %}

{% load static %}

{% block content %}
  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">
    <div class="py-16 w-full">
      <h1 class="text-3xl text-center">Resources</h1>
      <p class="mt-0 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non vestibulum velit. Aenean fringilla, arcu sit amet.</p>
    </div>

    <div class="w-full">
      <h3 class="py-2 border-b border-slate">Resource Category</h3>

      <div class="grid grid-cols-1 gap-4 my-11 md:grid-cols-2 lg:grid-cols-4">
        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>
      </div>

      <h3 class="py-2 border-b border-slate">Resource Category</h3>

      <div class="grid grid-cols-1 gap-4 my-11 md:grid-cols-2 lg:grid-cols-4">
        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>
      </div>

      <h3 class="py-2 border-b border-slate">Resource Category</h3>

      <div class="grid grid-cols-1 gap-4 my-11 md:grid-cols-2 lg:grid-cols-4">
        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>

        <div class="py-3 px-4 bg-charcoal">
          <h4>Name or Resource</h4>
          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
          <a href="#" class="text-sm uppercase text-orange">Learn More <span class="text-xs">></span></a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}