/* Home page */
:root{
  --card-w: max(280px, calc((100vw - (2*var(--site-pad)) - (2*var(--gap-x)))/3));
  --card-w-2: max(280px, calc((100vw - (2*var(--site-pad)) - (1*var(--gap-x)))/2));
}

.projects .grid{display:grid;gap:var(--gap-y) var(--gap-x);justify-content:start;grid-template-columns:repeat(3, var(--card-w))}
.home-services-link{margin:150px auto 0;text-align:center;font-family:Garamond,"EB Garamond",Georgia,serif;font-size:20px;max-width:500px;}
.home-services-link a{text-decoration:underline;text-underline-offset:3px}
.frame{margin:0;background:var(--color-block-a);border-radius:0;position:relative;width:100%;aspect-ratio:720/950}
.frame .inner{position:absolute;left:50%;transform:translateX(-50%);top:calc(90/950*100%);width:calc(520/720*100%);height:calc(670/950*100%);background:transparent;display:flex;align-items:center;justify-content:center}
.frame .inner img{width:100%;height:100%;object-fit:cover;display:block}
.frame figcaption{position:absolute;left:0;right:0;top:calc((70 + 670)/950 * 100%);bottom:0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(-10px)}
.frame h3{margin:0 0 4px;font-weight:400;font-size:24px;font-family: Garamond, "EB Garamond", Georgia, serif;color:var(--color-home-title)}
.project-subtitle{color:var(--color-home-title);opacity:var(--color-secondary-opacity)}
.frame p{margin:0 0 8px;font-size:15px;opacity:.8}
.frame .brand{position:absolute;left:0;right:0;bottom:10px;display:block;margin:0 auto;opacity:.65;width:70px;height:auto;font-size:10.5px}

.frame-1{background:var(--color-block-a)}
.frame-2{background:var(--color-block-b)}
.frame-3{background:var(--color-block-c)}
.frame-4{background:var(--color-block-a)}
.frame-5{background:var(--color-block-b)}
.frame-6{background:var(--color-block-c)}

@media (max-width:1400px){
  .projects .grid{grid-template-columns:repeat(2, var(--card-w-2))}
}

@media (max-width:870px){
  .projects .grid{gap:36px;grid-template-columns:max(280px, calc(100vw - (2*var(--site-pad))));justify-content:center}
  .frame{padding:28px 20px 14px}
}

@media (max-width:700px){
  .frame h3{font-size:20px}
}

@media (max-width:475px){
  .frame h3{font-size:17px;margin-bottom:-10px}
  .project-subtitle{display:none}
  .project-brand{display:none;margin-top:48px;width:80px}
}

@media (max-width:480px){
  .projects{padding-left:10px; padding-right:10px}
  .projects .grid{grid-template-columns:calc(100vw - 20px);justify-content:center}
}