/* The Countries page (slice CS4): a card for each country side by side on a wide screen, then the ask card (logical properties only). */
.countries-body {
  display: grid;
  gap: var(--s-5);
  max-inline-size: 46rem;
  margin-inline: auto;
  padding: var(--s-5) var(--s-4) var(--s-7);
}

.countries {
  display: grid;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .countries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.country {
  display: grid;
  align-content: start;
  gap: var(--s-3);
}

.country h2,
.country-ask h2 {
  margin: 0;
  font-size: var(--fs-3);
}

.country-brand {
  color: var(--text);
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
}

.country-langs-label {
  font-weight: var(--fw-strong);
}

.country-here {
  font-weight: var(--fw-strong);
}

.country .btn,
.country-ask .btn {
  justify-self: start;
}

.country-ask {
  display: grid;
  gap: var(--s-3);
}