diff --git a/web/static/public.css b/web/static/public.css
index b0e3a98..6e909c6 100644
--- a/web/static/public.css
+++ b/web/static/public.css
@@ -534,12 +534,33 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
     border-bottom-right-radius: .6rem;
 }
 
+/* graella allotjaments portada */
+
+.nature > div {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    grid-column-gap: 5rem;
+    grid-row-gap: 5rem;
+}
+
+.nature section:nth-child(2n + 1) { grid-area: 1 / 1 / 2 / 5; }
+.nature section:nth-child(2n + 2){ grid-area: 1 / 5 / 2 / 9; }
+.nature section:nth-child(2n + 3) { grid-area: 1 / 9 / 2 / 13; }
+.nature section:nth-child(2n + 4) { grid-area: 2 / 1 / 3 / 4; }
+.nature section:nth-child(2n + 5){ grid-area: 2 / 4 / 3 / 7; }
+.nature section:nth-child(2n + 6) { grid-area: 2 / 7 / 3 / 10; }
+.nature section:nth-child(2n + 7) { grid-area: 2 / 10 / 3 / 13; }
+
 @media (max-width: 64rem) {
     .nature > div {
+        display: flex;
         flex-direction: column;
     }
 }
 
+/* fi graella */
+
 .services {
     justify-content: end;
     background-color: var(--accent);