.portfolio__header {
  text-align: center;
  padding: var(--space-12) var(--space-4);
}

.portfolio__logo {
  display: flex;
  justify-content: center;
}

.portfolio__logo-img {
  max-height: 80px;
  max-width: 200px;
  object-fit: contain;
}

.portfolio__name {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-2);
}

.portfolio__bio {
  color: var(--color-text-secondary);
  max-width: var(--container-sm);
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}

.portfolio__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
}

.portfolio__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.portfolio__item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--transition-base);
}

.portfolio__item:hover {
  transform: scale(1.02);
}

.portfolio__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}