diff --git a/meta/static/css/footer.css b/meta/static/css/footer.css
index 72834d22..61b841fa 100644
--- a/meta/static/css/footer.css
+++ b/meta/static/css/footer.css
@@ -1,10 +1,13 @@
 #mainfooter {
+    font-size:.65rem;
+    letter-spacing: 2px;
     border-style: none; 
     border-color: initial; 
     border-width: 0; 
     border-top: 5px #EEEEEE solid;
     padding: .8rem 0; 
     margin: 0; 
+    background: #fafafa;
 }
 
 #footerbase {
@@ -65,4 +68,4 @@
         flex-wrap: wrap;
         padding-left: .6rem;
     }
-}
\ No newline at end of file
+}
diff --git a/meta/static/css/home.css b/meta/static/css/home.css
index 098716c2..71766f67 100644
--- a/meta/static/css/home.css
+++ b/meta/static/css/home.css
@@ -4,29 +4,56 @@
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
+    margin-bottom:1rem;
+    background:#fafafa;
+    border-radius: 10px;
+    padding:12px 10px 8px;
+    border-color:#eee #fafafa;
+    border-style:solid;
+    border-width:5px;
 }
 
-#intro > #destaque {
+#intro > #cover-image {
     display: flex;
     justify-content: center;
+    margin-right: 2rem;
 }
 
-#intro > .last {
+#intro > #cover-text {
     width: 60%;
+    font-size:1rem;
 }
 
-.main-content {
+#intro h1 {
+  text-transform:uppercase;
+  color:#333;
+  text-align:center;
+  font-weight:bold;
+  font-size:1.5rem;
+}
+
+#intro-more {
+  margin-bottom:1rem;
+}
+
+#main-content {
     width: 100%;
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 0rem 1rem;
     justify-content: center;
 }
 
+#photos p, #videos p, #tours p {
+  font-size:.8rem;
+  width:300px;
+}
+
 @media (max-width: 874px) {
-    #intro > .last {
+    #intro > #cover-text {
         width: 100%;
     }
-    #intro > #destaque {
+    #intro > #cover-image {
         margin: 0px;
     }
-}
\ No newline at end of file
+}
diff --git a/meta/static/css/style.css b/meta/static/css/style.css
index d57fb740..1f45f3de 100755
--- a/meta/static/css/style.css
+++ b/meta/static/css/style.css
@@ -658,13 +658,6 @@ Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
   margin:17px 0 0 0;
 }
 
-#main-more {
-  margin-bottom:1em;
-}
-
-#main-message {
-}
-
 #admin {
   padding:0 4px;
   position:fixed;
@@ -694,11 +687,6 @@ Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */
   float:left;
 }
 
-nav.main {
-  text-align:right;
-  font-size: 1.3em;
-}
-
 .menu {
   float: right;
   display: inline;
@@ -787,20 +775,6 @@ nav.main {
 }
 
 /* FOOTER */
-footer.main {
-  font-size:0.9em;
-  letter-spacing: 2px;
-  padding: 1em 0 0.6em;
-  background: #fafafa;
-  border-style:solid;
-  border-color:#EEEEEE #FAFAFA #FFFFFF #FAFAFA;
-  border-width:5px 5px 0 5px;
-  margin:0 -5px;
-  -moz-border-radius: 10px 10px 0 0;
-  -webkit-border-radius: 10px 10px 0 0;
-  border-radius: 10px 10px 0 0;
-}
-
 .cnpq img {
   vertical-align:top;
 }
@@ -1079,46 +1053,6 @@ div#notes {
   filter: dropshadow(color=#000000, offx=2, offy=2);
 }
 
-/* HOME PAGE */
-div.main {
-  margin-bottom:2em;
-}
-
-#intro {
-  margin-bottom:1em;
-  background:#fafafa;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  border-radius: 10px;
-  padding:12px 10px 8px;
-  border-color:#eee #fafafa;
-  border-style:solid;
-  border-width:5px;
-}
-
-#destaque {
-  margin-right:25px;
-}
-
-#intro h1 {
-  text-transform:uppercase;
-  color:#333;
-  text-align:center;
-  font-weight:bold;
-  font-size:2em;
-}
-
-#intro p {
-  font-size:1.2em;
-  text-align:justify;
-}
-
-.main #photos p, #videos p, #tours p {
-  font-size:1.1em;
-  width:300px;
-  text-align:justify;
-}
-
 /* SEARCH PAGE */
 div#search-results {
 }
diff --git a/meta/templates/base.html b/meta/templates/base.html
index d58be51f..b0fb2603 100755
--- a/meta/templates/base.html
+++ b/meta/templates/base.html
@@ -67,17 +67,17 @@
     <link rel="stylesheet" href="{{ STATIC_URL }}css/ui-lightness/jquery-ui-1.8.21.custom.css">
   </head>
   <body>
-    <div id='div-container' class="container">
+    <div id="div-container">
 
-      <nav id="nav-header" class="main">
+      <nav id="nav-header">
       {% include 'nav.html' %}
       </nav>
 
-      <header class="main" id="mainheader">
+      <header id="mainheader">
       {% include 'header.html' %}
       </header>
 
-      <section class="main" id="content">
+      <section id="content">
         <div class="{% if content_block and content_sidebar %}content-and-sidebar{% else %}content-only{% endif %}">
           {% block content %}{% endblock %}
           {% block sidebar %}{% endblock %}
@@ -85,7 +85,7 @@
 
       </section>
 
-      <footer id="mainfooter" class="main quiet">
+      <footer id="mainfooter" class="quiet">
       {% include 'footer.html' %}
       </footer>
 
diff --git a/meta/templates/home.html b/meta/templates/home.html
index 33b8013a..60049561 100755
--- a/meta/templates/home.html
+++ b/meta/templates/home.html
@@ -18,31 +18,28 @@
 
 {% block content %}
 
-<section class="main shadow span-23 last" id="intro">
-<div class="span-8" id="destaque">
+<section class="shadow" id="intro">
+<div id="cover-image">
   <a href="{{ main_image.get_absolute_url }}">
     {% thumbnail main_image.coverpath "300x200" crop="center" as im %}
     <img class="shadow" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="{{ main_image.title }}">
     {% endthumbnail %}
   </a>
 </div>
-<div class="last">
+<div id="cover-text">
   <h1>{% trans 'Explore a biodiversidade marinha' %}</h1>
   <p>
   {% blocktrans %}O banco de imagens <em>Cifonauta</em> contém uma grande variedade de fotos e vídeos provenientes de atividades científicas em biologia marinha. As imagens possuem classificação taxonômica, estágio de vida, habitat e outras informações que permitem navegar de maneira intuitiva e didática.{% endblocktrans %}
   </p>
-  <div class="align-center" id="main-more">
+  <div class="align-center" id="intro-more">
     <a href="/about/">{% trans 'saiba mais' %}</a> | <a href="/organization/">{% trans 'organização do conteúdo' %}</a> | <a href="/terms/">{% trans 'termos de uso' %}</a> | <a href="/press/">{% trans 'imprensa' %}</a>
   </div>
-  <div class="quiet align-center" id="main-message">
-    <!--Contribua com o desenvolvimento do banco enviando <a href="/feedback/">sugestões</a>.-->
-  </div>
 </div>
 </section>
 
-<section class="main span-24 last main-content">
+<section id="main-content">
 
-<div class="main span-8" id="photos">
+<div id="photos">
   <h2><a href="/search/?datatype=photo">{% trans 'Fotos' %}</a></h2>
   <a href="{{ photo.get_absolute_url }}">
     {% thumbnail photo.coverpath "300x200" crop="center" as im %}
@@ -55,7 +52,7 @@ <h2><a href="/search/?datatype=photo">{% trans 'Fotos' %}</a></h2>
   </p>
 </div>
 
-<div class="main span-8" id="videos">
+<div id="videos">
   <h2><a href="/search/?datatype=video">{% trans 'Vídeos' %}</a></h2>
   <a href="{{ video.get_absolute_url }}">
     {% thumbnail video.coverpath "300x200" crop="center" as im %}
@@ -68,7 +65,7 @@ <h2><a href="/search/?datatype=video">{% trans 'Vídeos' %}</a></h2>
   </p>
 </div>
 
-<div class="main span-8 last" id="tours">
+<div id="tours">
   <h2><a href="/tours/">{% trans 'Tours' %}</a></h2>
   <a href="{{ tour.get_absolute_url }}">
     {% thumbnail tour_image.coverpath "300x200" crop="center" as im %}
