.fx-method-section {
  padding-block: var(--fx-space-8);
}

.fx-method-section__heading {
  display: grid;
  gap: var(--fx-space-3);
  margin-bottom: var(--fx-space-6);
}

.fx-method-section__heading > * {
  margin: 0;
}

.fx-method-section__heading > .fx-label-sm {
  color: var(--fx-color-primary);
}

.fx-method-section__heading h2 {
  max-width: 38rem;
  text-wrap: balance;
}

.fx-method {
  display: grid;
  gap: var(--fx-space-2);
}

.fx-method__question {
  display: grid;
  gap: var(--fx-space-2);
  padding: var(--fx-space-4);
  border: 1px solid var(--fx-color-line);
  background: var(--fx-color-surface-high);
}

.fx-method__meta {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--fx-space-2);
  align-items: baseline;
}

.fx-method__number {
  color: var(--fx-color-primary);
  font-size: var(--fx-text-body);
  font-weight: 600;
  line-height: var(--fx-leading-body);
}

.fx-method__meta .fx-label-sm {
  color: var(--fx-color-outline);
  font-size: var(--fx-text-body-sm);
  line-height: var(--fx-leading-body-sm);
  text-transform: uppercase;
}

.fx-method__copy {
  display: grid;
  gap: var(--fx-space-2);
  margin-left: calc(2.25rem + var(--fx-space-2));
}

.fx-method__copy > * {
  margin: 0;
}

.fx-method__copy h3 {
  font-size: var(--fx-text-h4);
  line-height: var(--fx-leading-h4);
}

.fx-method__copy p {
  color: var(--fx-color-text-secondary);
}

@media (max-width: 359px) {
  .fx-method__question {
    padding: var(--fx-space-3);
  }

  .fx-method__meta {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .fx-method__copy {
    margin-left: calc(2rem + var(--fx-space-2));
  }
}

@media (min-width: 768px) {
  .fx-method-section {
    padding-block: var(--fx-space-12);
  }

  .fx-method-section > .fx-container {
    max-width: 62rem;
  }

  .fx-method-section__heading {
    margin-bottom: var(--fx-space-8);
  }

  .fx-method {
    gap: var(--fx-space-3);
  }

  .fx-method__question {
    grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 1fr);
    gap: var(--fx-space-6);
    align-items: start;
    padding: var(--fx-space-5);
  }

  .fx-method__copy {
    margin-left: 0;
  }
}