Update

components/faq/FaqSection.module.css

@@ -0,0 +1,137 @@
+.section {
+  background: var(--color-background-linear);
+  padding-block: var(--space-16);
+}
+
+.inner {
+  max-width: var(--container-width);
+  margin-inline: auto;
+  padding-inline: var(--space-4);
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-8);
+  align-items: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.heading {
+  max-width: 11ch;
+  text-align: left;
+  color: var(--color-accent);
+}
+
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.item {
+  width: 100%;
+}
+
+.itemHeading {
+  margin: 0;
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  width: 100%;
+  min-height: 52px;
+  padding: var(--space-3) var(--space-5);
+  background: var(--color-accent);
+  color: #ffffff;
+  border: 0;
+  border-radius: 9999px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.trigger:hover,
+.trigger:focus-visible {
+  background: #1f6152;
+}
+
+.triggerText {
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+}
+
+.iconWrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  transition: transform 0.25s ease;
+}
+
+.trigger[aria-expanded="true"] .iconWrap {
+  transform: rotate(180deg);
+}
+
+.panel {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+}
+
+.panelInner {
+  padding: var(--space-4) var(--space-5) var(--space-2);
+}
+
+.answer {
+  max-width: 52ch;
+  color: var(--color-text-muted);
+  font-size: var(----font-size-xs);
+  line-height: 1.5;
+}
+
+@media (min-width: 768px) {
+  .section {
+    padding-block: var(--space-24);
+  }
+
+  .inner {
+    grid-template-columns: 280px 1fr;
+    gap: var(--space-16);
+  }
+
+  .trigger {
+    min-height: 56px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .section {
+    padding-block: var(--space-36);
+  }
+
+  .inner {
+    padding-inline: var(--space-6);
+  }
+
+  .accordion {
+    max-width: 560px;
+    justify-self: end;
+    width: 100%;
+  }
+}
+
+@media (hover: none) {
+  .trigger:hover,
+  .trigger:focus-visible {
+    background: var(--color-accent);
+    box-shadow: 0 4px 14px rgba(38, 115, 97, 0.14);
+  }
+}