/* Studio page */
.studio.feature{margin-top:70px}
.studio .feature-image img{width:100%;height:100%;display:block;object-fit:cover}
.studio.feature-3 .feature-image{display:flex;align-items:center;justify-content:flex-end}
.studio.feature-3 .feature-image img{width:100%;height:auto;object-fit:contain}
.studio .feature-content p,
.studio .stack .item-sub{font-size:19px}
.studio .feature-content a{text-decoration:underline;text-underline-offset:3px}

.studio.feature-2 .feature-frame{grid-template-columns:70% 30%}
.studio.feature-2 .feature-title{font-size:30px}
.studio.feature .feature-title{font-size:30px}
.studio .feature-title,
.studio .stack .item-title{
  font-family: Garamond, "EB Garamond", Georgia, serif;
  font-size: 29px;
  font-weight: 600;
}

.studio.feature:not(.feature-2) .feature-frame{grid-template-columns:calc(30% + var(--studio-feature1-delta)) calc(70% - var(--studio-feature1-delta))}
.studio.feature-2 .feature-frame{grid-template-columns:calc(75% - var(--studio-feature2-delta)) calc(25% + var(--studio-feature2-delta))}
.studio.feature-3 .feature-frame{grid-template-columns:30% 70%; aspect-ratio: auto}

@media (max-width: 1100px){
  .studio.feature-3 .feature-image img{width:100%; height:auto}
}

@media (min-width: 476px) and (max-width: 1100px){
  .studio .feature-frame{ width:calc(100% + var(--services-overshoot-right)) !important; margin-left:0 !important; margin-right:calc(-1 * var(--services-overshoot-right)) !important; align-items:stretch !important; justify-items:stretch !important; overflow:hidden !important }
  .studio .feature-frame > *{ grid-column:1 / -1 }
  .studio .feature-image{ width:inherit !important; max-width:inherit !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; border:0 !important; display:block !important }
  .studio .feature-frame > .feature-image, .studio .feature-frame > .feature-content{ justify-self:stretch !important; box-sizing:border-box }
  .studio .feature-frame > .feature-content{ width:100% !important; max-width:100% !important }
  .studio .feature-image img{ width:100% !important; height:auto !important; display:block }
}

@media (max-width: 1100px){
  .studio .feature-frame{ overflow:hidden }
}

.studio.center{margin-top:100px; margin-bottom:100px}
.studio .center-text{font-size:var(--services-center-size); line-height:1.5; text-align:center; white-space:pre-line; font-family: Garamond, "EB Garamond", Georgia, serif}

.studio.stack{margin-top:var(--services-stack-gap);width:calc(100% + var(--services-overshoot-right));margin-right:calc(-1 * var(--services-overshoot-right));display:grid;grid-template-columns:1fr;gap:var(--services-stack-gap)}

.studio .stack .stack-item{
  display:grid;
  grid-template-columns:35% 65%;
  height:auto;
  align-items:stretch;
}
.studio .stack .stack-item .item-head{
  position:static;
  height:auto;
  padding:24px var(--site-pad);
  text-align:left;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.studio .stack .stack-item .item-title{ text-align:left }
.studio .stack .stack-item .item-sub{ text-align:left }
.studio .stack .stack-item .item-title{font-size:30px}
.studio .stack .stack-item .item-image{
  position:static;
  height:auto;
}
.studio .stack .stack-item .item-image img{
  width:100%;
  height:auto;
  object-fit:cover;
}

@media (max-width: 1100px){
  .studio .stack .stack-item{ grid-template-columns:1fr }
}

@media (max-width: 1200px){
  .studio.stack{grid-template-columns:1fr}
}

@media (max-width: 720px){
  .studio.stack{grid-template-columns:1fr}
}

@media (max-width: 480px){
  .main.studio, .studio{padding-left:0; padding-right:0}
  .studio .feature-frame{
    width:min(100%, calc(100vw)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    max-width:calc(100% - 20px);
    aspect-ratio:auto;
    box-sizing:border-box;
    overflow:hidden;
    align-items:stretch !important;
    justify-items:stretch !important;
  }
  .studio .feature-image{overflow:hidden; width:100% !important; margin:0 !important}
  .studio .feature-image img{width:100% !important; height:auto !important; object-fit:cover !important; display:block}
  .studio.stack{width:100% !important; margin-left:auto; margin-right:auto}
  .studio .stack .item-sub{ width:var(--mobile-text-w); max-width:var(--mobile-text-w); margin-left:auto; margin-right:auto; display:block }
  .studio .feature-content{
    display:flex !important;
    flex-direction:column;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:0 !important;
    width:100%;
  }
  .studio .feature-frame{ padding:0 !important }
  .studio .feature-image{ padding:0 !important }
  .studio .feature-title{width:100% !important; max-width:var(--mobile-text-w) !important; margin-left:auto; margin-right:auto; display:block}
  .studio .feature-content p{width:100% !important; max-width:var(--mobile-text-w) !important; margin-left:auto; margin-right:auto; display:block}
  .studio .feature-frame > *{ width:100% !important; box-sizing:border-box }
  .studio p{ width:100% !important; max-width:var(--mobile-text-w) !important; margin-left:auto; margin-right:auto; text-align:center; display:block }
  .studio h1, .studio h2, .studio h3, .studio h4, .studio h5, .studio h6{
    width:100% !important; max-width:var(--mobile-text-w) !important;
    margin-left:auto; margin-right:auto; text-align:center; display:block
  }
  .studio .feature-content > *{ width:100% !important; max-width:var(--mobile-text-w) !important; margin-left:auto !important; margin-right:auto !important; text-align:center }
  .studio .stack .item-head > *{ width:100% !important; max-width:var(--mobile-text-w) !important; margin-left:auto !important; margin-right:auto !important; text-align:center }
  .studio .stack .item-title{ width:100% !important; max-width:var(--mobile-text-w) !important; margin-left:auto; margin-right:auto; text-align:center !important; display:block }
  .studio .stack .item-sub{ width:100% !important; max-width:var(--mobile-text-w) !important; margin-left:auto; margin-right:auto; text-align:center !important; display:block }
  .studio .stack .item-image{ width:100% !important }
  .studio .stack .item-image img{ width:100% !important; height:auto !important; object-fit:cover !important; display:block }
  .studio .feature-image{ width:100% !important }
  .studio .feature-image img{ width:100% !important; height:auto !important }
  .studio .feature-frame > .feature-image{ width:inherit !important; max-width:inherit !important }
  .studio.feature-3 .feature-image{ justify-content:center }
  .studio .stack .stack-item .item-head{ width:100% !important; text-align:center; align-items:center; justify-content:center; padding-left:0; padding-right:0 }
  .studio .feature-title,
  .studio .stack .item-title{ font-size:22px !important }
  .studio .feature-frame{ display:grid !important; grid-template-columns:1fr !important }
  .studio .feature-frame > .feature-image,
  .studio .feature-frame > .feature-content{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box;
  }
  .studio .feature-frame > *{ grid-column:1 / -1 !important }
  .studio .feature-image img{ display:block; width:100% !important; height:auto !important }
}