.modular-areas {
  padding: var(--spacing-md) 0;
  margin-top: var(--spacing-lg);
  background-size: cover;
  background-position: center;

  & h1 {
    text-align: center;
    color: var(--text-dark);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    text-shadow: var(--text-shadow-white);
    margin-top: 0;
  }

  & h3 {
    font-weight: var(--font-weight-bold);
    text-shadow: var(--text-shadow-white);
  }

  & .area {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
  }

  & .districts {
    list-style: none;
    margin: 0;
  }

  & .district {
    display: inline-block;
    background: var(--bg-white);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    padding: var(--spacing-sm);
    margin: var(--spacing-sm);
  }
}