/* Keep in sync with src/styles/visual-tokens.css and src/styles/site-photo.css */

:root {
  --site-radius-photo: 1rem;
  --site-radius-card: 1rem;
  --site-radius-control: 0.75rem;
  --site-radius-shell: 0.875rem;
  --site-photo-hero-max-height: min(70vh, 420px);
  --site-photo-about-max-height: min(70vh, 520px);
}

.site-photo-frame {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--site-radius-photo);
  line-height: 0;
}

.site-photo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

.site-photo--hero {
  max-height: var(--site-photo-hero-max-height);
}

.site-photo--about {
  max-height: var(--site-photo-about-max-height);
}