Update

2026-05-13 09:08:53 +02:00
1 parent 0b775a938d
commit 8757431c79
@@ -0,0 +1,108 @@
+.section {
+  background: #ffffff;
+  padding-bottom: var(--space-16);
+}
+
+.inner {
+  max-width: var(--container-width);
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+}
+
+.card {
+  background-color: var(--color-accent);
+  border-radius: var(--radius-lg);
+  padding: var(--space-8) var(--space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.top {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  align-items: flex-start;
+}
+
+.top :global(.btn) {
+  font-weight: var(--font-weight-semibold);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.heading {
+  color: #ffffff;
+  max-width: 24ch;
+}
+
+.lead {
+  color: rgba(255, 255, 255);
+  font-size: var(--font-size-xs);
+  max-width: 72ch;
+}
+
+.divider {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  margin: 0;
+}
+
+.contactRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.contactItem {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: #ffffff;
+  font-size: var(--font-size-xs);
+}
+
+@media (min-width: 768px) {
+  .section {
+    padding-bottom: var(--space-24);
+  }
+
+  .card {
+    padding: var(--space-10) var(--space-10);
+  }
+
+  .top {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-8);
+  }
+
+  .contactRow {
+    flex-direction: row;
+    gap: var(--space-8);
+    flex-wrap: wrap;
+  }
+}
+
+@media (min-width: 1024px) {
+  .inner {
+    padding-inline: var(--space-6);
+  }
+
+  .card {
+    padding: var(--space-12) var(--space-12);
+  }
+}
+
+@media (hover: none) {
+  .button:hover,
+  .button:focus-visible {
+    background: #ffffff;
+    box-shadow: none;
+  }
+}