Update style.css

Add galeria

Author: MarjMart

public/style.css

@@ -379,6 +379,81 @@ body::after {
 
 }
 
+.screens-section {
+
+    padding: 100px 8%;
+}
+
+.section-title {
+
+    text-align: center;
+
+    margin-bottom: 60px;
+}
+
+.section-title h2 {
+
+    font-size: 42px;
+
+    color: var(--verde-escuro);
+
+    margin-bottom: 12px;
+}
+
+.section-title p {
+
+    color: var(--texto-mutado);
+}
+
+.screens-grid {
+
+    display: grid;
+
+    grid-template-columns:
+        repeat(auto-fit, minmax(320px, 1fr));
+
+    gap: 30px;
+}
+
+.screen-card {
+
+    background: white;
+
+    border-radius: 20px;
+
+    overflow: hidden;
+
+    border: 1px solid rgba(15,23,42,0.08);
+
+    box-shadow:
+        0 8px 24px rgba(15,23,42,0.06);
+
+    transition: var(--transition);
+}
+
+.screen-card:hover {
+
+    transform: translateY(-8px);
+
+    box-shadow:
+        0 20px 40px rgba(15,23,42,0.12);
+}
+
+.screen-card img {
+
+    width: 100%;
+
+    display: block;
+}
+
+.screen-card h3 {
+
+    padding: 20px;
+
+    text-align: center;
+
+    color: var(--verde-escuro);
+}
 
 /* CARDS BENEFÍCIOS*/