.frf {
  background: var(--frf-background);
  color: var(--frf-text);
  font-family: var(--font-sans);
  font-size: var(--frf-link-font-size);
  line-height: var(--frf-link-line-height);
  padding-block: var(--frf-section-padding-block);
}

.frf__inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding-inline: var(--layout-gutter);
}

.frf__grid {
  display: grid;
  gap: var(--frf-column-gap);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.frf__title {
  margin: 0 0 var(--space-3);
  font-size: var(--frf-heading-size);
  font-weight: var(--frf-heading-weight);
  text-transform: var(--frf-heading-transform);
  letter-spacing: 0.04em;
}

.frf__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.frf__link {
  color: var(--frf-link-color);
  text-decoration: none;
  min-height: var(--space-11);
  display: inline-flex;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  .frf__link:hover {
    color: color-mix(in oklch, var(--frf-link-color) 80%, white);
  }
}

.frf__social {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.frf__social a {
  color: var(--frf-link-color);
  text-decoration: none;
  min-height: var(--space-11);
  display: inline-flex;
  align-items: center;
}

@media (hover: hover) and (pointer: fine) {
  .frf__social a:hover {
    text-decoration: underline;
  }
}