:root {
  --font-family:'Martina Plantijn', monospace;
  --font-weight:400;
  --font-weight-heading:500;
  --font-weight-menu:500;
  --font-weight-light:200;
  --font-size-main:14px;
  --font-size-small:12px;

  --letter-spacing-light:0.03em;
  --line-height-main:1.5;

  --color-background-scrim:#ffffffa3;
  --color-text-main:#000000;
  --color-text-light:#7d7d7d;
  --color-text-link:var(--color-text-main);
  --color-highlight:yellow;
  --color-text-active:var(--site-style-link-color, #ff0000);
  
  --width-gutter:16px;
  --height-header:calc(1rem * var(--line-height-main) + (var(--width-gutter) * 2));
  
  --grid-template-columns:repeat(10, minmax(0, 1fr));
  --grid-template-rows:auto 1fr auto;

  --grid-template-columns-project-header-inner:repeat(6, minmax(0, 1fr));
  --grid-template-rows-project-header-inner:auto auto 1fr;

  --grid-column-site-header:1 / 3;
  --grid-column-site-nav:-3 / -1;
  
  --grid-column-work-index:1 / 3;
  --grid-column-work-index-project:1 / 3;
  
  --grid-column-filters:-3 / -1;
  --grid-column-filters-project:-3 / -1;
  
  --grid-column-project-header:3 / -3;
  --grid-column-project-header-details:1 / -2;
  --grid-column-project-header-arrows:-2;
  --grid-column-project-images:3 / -3;

  --grid-column-about-section:span 2;
  --grid-column-about-text:1 / 7;
  --grid-column-about-image-column:7 / -1;

  --grid-row-work-index:2 / -2;
  --grid-row-work-index-project:2 / -2;

  --grid-row-filters:2 / -2;
  --grid-row-filters-project:2 / -2;

  --grid-row-project-header:1 / 2;
  --grid-row-project-header-arrows:1;
  --grid-row-project-images:2 / -2;

  --grid-row-about-image-column:1;
  
  --gap-project-header-inner:0 calc(var(--width-gutter) * 2);

  --text-align-filters:right;
  --text-align-filters-project:right;
  --justify-content-project-nav:flex-end;

  --display-project-header-arrows:block;
  --display-site-nav-item-placeholder:block;

  --min-height-project-images:calc(100vh - (2rem * var(--line-height-main) + (var(--width-gutter) * 2)) * 2);
  
  --max-width-paragraph:46em;

  /* --max-width-project-images-inner:none; */
  --max-width-project-image-xsmall:calc(50% - var(--width-gutter) * 0.5);
  --max-width-project-image-small:66.6667%;

  --top-heading-subsection:calc(1em * var(--line-height-main) + var(--width-gutter) * 2 - 1px);
  --border-top-heading-subsection:none;
  --padding-heading-subsection:0 0 0.8em 0;
  --padding-project-images:var(--width-gutter);
  --padding-project-description:0;
  --margin-body-subsection:0 0 0.6em;
  --margin-project-header-arrows:0;
  --height-figure-image-container-contain-height:100%;
  --width-figure-image-container-contain-height:auto;
  --aspect-ratio-figure-image-container-contain-height:1 / 1;
  --container-name-figure-image-container-contain-height:imagecontainer;
  --container-type-figure-image-container-contain-height:size;
  
  --backdrop-filter:blur(4px);
}

@media screen and (max-width: 1440px) {
  :root {
    --grid-template-columns:repeat(8, minmax(0, 1fr));
    --grid-template-columns-project-header-inner:repeat(4, minmax(0, 1fr));

    --grid-template-rows:auto 1fr auto auto;
    --grid-template-rows-project-header-inner:auto auto auto auto;

    --grid-column-filters-project:1 / -1;

    --grid-column-project-header:3 / -3;
    --grid-column-project-images:3 / -1;

    --grid-column-about-text:1 / 5;
    --grid-column-about-image-column:5 / -1;
    
    --grid-row-work-index-project:2;

    --grid-row-project-header:1 / 2;
    --grid-row-filters-project:-3;

    --text-align-filters-project:left;
  }
}

/* @media screen and (min-height: 800px) {
  :root {
    --max-width-project-images-inner:calc(100vh - (var(--width-gutter) * 2 + 3rem * var(--line-height-main)) * 2);
  }
}

@media screen and (min-aspect-ratio: 4.6 / 3) and (min-width: 1025px) and (min-height: 800px) {
  :root {
    --max-width-project-images-inner:calc(100vh - (var(--width-gutter) * 2 + 2rem * var(--line-height-main)) * 2);
  }
} */

@media screen and (min-aspect-ratio: 4.6 / 3) and (min-width: 1025px) {
  :root {
    --grid-template-columns:repeat(8, minmax(0, 1fr));

    --grid-template-rows:auto auto 1fr auto;

    --grid-column-filters-project:-3 / -1;

    --grid-column-project-header:1 / 3;
    --grid-column-project-header-details:1 / -1;
    --grid-column-project-header-arrows:1 / -1;
    --grid-column-project-images:3 / -3;

    --grid-row-work-index-project:3 / 4;

    --grid-row-project-header:2 / 3;
    --grid-row-project-header-arrows:5;
    --grid-row-filters-project:2/-2;

    --text-align-filters-project:right;
    
    --justify-content-project-nav:flex-start;
    
    --display-site-nav-item-placeholder:none;
    
    --padding-project-description:0;

    --margin-project-header-arrows:var(--width-gutter) 0 0;
  }
}

@media screen and (max-width: 1280px) {
  :root {
    --font-size-main:13px;
    --font-size-small:10px;
  }
}

@media screen and (max-width: 1024px) {
  :root {
    --grid-template-rows:auto auto 1fr auto;
    
    --grid-column-work-index:1 / 7;
    --grid-column-work-index-project:1 / 7;
    --grid-column-filters:7 / -1;
    --grid-column-filters-project:7 / -1;
    --grid-column-project-images:1 / -1;
    --grid-column-about-section:span 4;
  
    --grid-row-project-images:2;
    --grid-row-work-index-project:3 / -2;
    --grid-row-filters:2 / -2;
    --grid-row-filters-project:3 / -2;
  
    --text-align-filters-project:right;

    --display-site-nav-item-placeholder:none;

    --min-height-project-images:none;
    --height-figure-image-container-contain-height:auto;
    --width-figure-image-container-contain-height:100%;
    --padding-project-description:0 25vw;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --grid-template-rows:auto auto auto 1fr auto;

    --grid-template-columns-project-header-inner:1fr auto;
    --grid-template-rows-project-header-inner:auto auto auto auto;
  
    --grid-column-site-header:1 / 5;
    --grid-column-site-nav:5 / -1;
    --grid-column-work-index-project:1 / 5;
    --grid-column-filters-project:5 / -1;
    --grid-column-project-header:1 / -1;
    --grid-column-project-header-details:1 / 2;
    
    --grid-row-project-header:2;
    --grid-row-project-images:3;
    --grid-row-work-index-project:4;
    --grid-row-filters-project:4;

    --display-project-header-arrows:block;

    --padding-project-images:0 var(--width-gutter) var(--width-gutter);
    --padding-project-description:0;
    
    --aspect-ratio-figure-image-container-contain-height:auto;
    --container-name-figure-image-container-contain-height:none;
    --container-type-figure-image-container-contain-height:normal;
    --max-width-project-image-xsmall:none;
    --max-width-project-image-small:none;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --grid-template-rows:auto auto auto 1fr auto auto;

    --grid-column-work-index:1 / -1;
    --grid-column-work-index-project:1 / -1;
    --grid-column-filters:1 / -1;
    --grid-column-filters-project:1 / -1;  
    --grid-column-about-section:1 / -1;
    --grid-column-about-text:1 / -1;
    --grid-column-about-image-column:1 / -1;
  
    --grid-row-work-index:2 / 3;
    --grid-row-filters:3;
    --grid-row-filters-project:5;
    --grid-row-about-image-column:2;
  
    --text-align-filters:left;
    --text-align-filters-project:left;
  }
}