.about-header {
  margin-bottom: var(--space-md);
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.about-title {
  font-family: var(--font-small-caps);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--text-spacing-sm);
  line-height: var(--line-height-md);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  text-transform: capitalize;
}

.about-content {
  color: var(--color-text-main);
  font-family: var(--font-main);
  font-size: var(--text-md);
  line-height: var(--line-height-md);
}

.about-content::first-letter {
  font-size: var(--text-lg);
  color: var(--color-accent);
  text-transform: uppercase;
}

.about-contact {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
  gap: var(--space-md);
  font-style: normal;
}

.about-contact a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--animation-speed) ease-in-out;
}

.about-contact a:hover {
  color: var(--color-text-main);
}

@media (max-width: 640px) {
  .about-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }
}