/*
  Desktop portfolio page layout.
*/

:root {
  --page-min: 900px;
  --portfolio-desktop-content-max: 680px;
  --portfolio-desktop-side-gap: 61px;
  --portfolio-name-gap: 94px;
  --portfolio-name-to-text-gap: 33px;
  --portfolio-text-to-text-gap: 33px;
  --portfolio-primary-copy-line-height: 25px;
  --portfolio-top-bottom-gap: 116px;
  --portfolio-artwork-gap: 90px;
  --portfolio-artwork-name-gap: 30px;
  --portfolio-media-gap: 6px;
  --portfolio-grid-column-gap: 6px;
  --portfolio-grid-row-gap: 6px;
}

html,
body {
  min-width: var(--page-min);
}

body {
  overflow-x: auto;
}

.portfolio-page-content {
  width: min(var(--portfolio-desktop-content-max), calc(max(100vw, var(--page-min)) - (var(--portfolio-desktop-side-gap) * 2)));
  padding: 137px 0 160px;
}

.portfolio-name {
  font-size: 72px;
  line-height: 60px;
}

.portfolio-copy {
  font-size: 14px;
  line-height: 20px;
}

.portfolio-copy.portfolio-copy--primary {
  line-height: var(--portfolio-primary-copy-line-height);
}