/* MOBILE */
@media only screen and (max-width: 750px) {
   :root {
      --gap: 4vw;
      --biggap: 6vw;
      --content-inset: 4vw;
      --block-padding: 6vw;
      --base-font-size: 5vw;
   }

   .pswp__custom-caption {
      font-size: calc(var(--base-font-size) * .8);
      width: 90%;
   }

   page-wrapper {
      padding-top: calc(var(--gap) * 6);
   }

   nav {
      padding: calc(var(--gap) / 1.5) var(--gap);
   }

   @media (orientation: landscape) {
      nav {
         position: absolute;
        flex-direction: row;
      }
    }

   link-block .link-panel {
      width: 100vw;
      box-sizing: border-box;
   }

   body {
      font-size: var(--base-font-size);
   }

   footer a.button {
      font-size: calc(var(--base-font-size) * 0.8);
      border-radius: var(--base-font-size);
   }

   button.category {
      font-size: calc(var(--base-font-size) * 0.45);
      padding: calc(var(--base-font-size) * 0.25)
         calc(var(--base-font-size) * 0.75);
      margin-top: calc(var(--base-font-size) * 0.25);
   }

   /* INLINE */

   h1 {
      color: inherit;
      font-size: calc(var(--base-font-size) * 1.5);
      font-weight: 400;
      letter-spacing: calc(var(--base-font-size) * -0.1);
      line-height: calc(var(--base-font-size) * 2.2);
      text-wrap: balance; 
   }

   h1 > span {
      display: inline-block;
      font-size: calc(var(--base-font-size) * 2.75);
      text-wrap: nowrap;
      margin-left: 0;
   }

   h1 > span > span {
      border-bottom: none;
   }

   h2 {
      font-size: calc(var(--base-font-size) * 1.75);
   }

   h3 {
      font-size: calc(var(--base-font-size) * 1.1);
   }

   h4 {
      font-size: calc(var(--base-font-size) * 1.375);
   }

   /* FORM */
   label {
      font-size: var(--base-font-size);
   }

   input:not([type="file"]),
   textarea {
      font-size: var(--base-font-size);
      padding: calc(var(--base-font-size) * 0.25);
   }

   input[type="file"] {
      font-size: calc(var(--base-font-size) * 0.9);
   }

   /* select {
      font-size: calc(var(--base-font-size) * 1);
      height: calc(var(--base-font-size) * 2);
   } */

   button[type="submit"] {
      font-size: var(--base-font-size);
   }

   /* CONTAINERS */

   .flex-columns-2 {
      display: block;
      flex: 0 0 100%;
   }

   .flex-columns-3 {
      display: block;
      flex: 0 0 100%;
      min-width: 100%;
   }

   .flex-columns-4 {
      display: block;
      flex: 0 0 100%;
   }

   stack-h {
      min-width: 100%;
      flex-wrap: wrap;
   }

   stack-h[nowrap] {
      flex-wrap: wrap;
   }

   stack-h[nowrap] img {
      max-width: 100%;
      width: 100%;
   }

   stack-h[rightlink] {
      padding: var(--gap);
   }

   footer stack-h[nowrap] {
      margin-bottom: 6vw;
   }

   footer stack-h[nowrap] img {
      max-width: 30%;
      width: 30%;
   }

   work-thumbnail-featured h4,
   work-thumbnail h4 {
      font-size: var(--base-font-size);
   }

   stack-h[work] {
      gap: var(--gap);
   }

   stack-h[work-entry-title] {
      flex-wrap: nowrap;
      padding-top: 0.5vw; 
      font-size: calc(var(--base-font-size) * .8);
   }

   content-block {
      padding: var(--biggap);
      font-size: calc(var(--base-font-size) * 0.85);
      columns: 1;
   }

   thumbnail-container {
      flex: 0 0 calc(50% - ((var(--biggap) * 1) / 2));
   }

   feature-testimonial {
      font-size: calc(var(--base-font-size) * 1);
   }

   feature-testimonial h3::before {
      top: calc(-1.5 * var(--gap));
      left: calc(-1 * var(--gap));
   }

   feature-testimonial h3::after {
      bottom: calc(-1.5 * var(--gap));
      right: calc(-1 * var(--gap));
   }

   feature-testimonials h3 {
      margin-bottom: calc(3 * var(--biggap));
   }

   feature-testimonials h3::before {
      top: calc(-1.5 * var(--gap));
      left: calc(0.1 * var(--gap));
   }

   feature-testimonials h3::after {
      bottom: calc(-1.5 * var(--gap) + var(--biggap) * 2);
      right: calc(0.1 * var(--gap));
   }

   feature-testimonials div {
      flex: 0 0 100%;
      font-size: calc(var(--base-font-size) * 0.6);
      font-size: var(--base-font-size);
      padding: var(--biggap);
   }

   feature-testimonials stack-h {
      flex-direction: column-reverse;
      gap: calc(var(--gap) * 0.5);
   }

   feature-testimonials span {
      font-size: calc(var(--base-font-size) * .9);
      width: calc(100% - (var(--biggap) * 2));
   }

   feature-testimonials div h3 {
      font-size: calc(var(--base-font-size) * 1.3);
   }

   work-thumbnail-featured,
   work-thumbnail {
      flex: 0 0 100%;
   }

   image-gallery img {
      flex: 0 0 100%;
   }

   text-block[contact] h4 {
      font-size: var(--base-font-size);
   }

   text-block[contact] stack-h[top] {
      gap: var(--biggap);
   }
   
   text-block[blue] p {
      columns: 1;
   }


   #bts-slideshow-app {
      height: 660vw;
   }

   bts-grid {
      margin-top: 5vw;
      padding: 0 5vw;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 1vw;
   }


   .video-player-container {
      flex: 1 0 calc(100% - 1vw);
   }

   .video-caption {
      font-size: calc(var(--base-font-size) * 1);
      margin-bottom: 2vw;
   }

   bts-slideshow h5 {
      font-size: calc(var(--base-font-size) * 1);
   }

   .freeform-row .freeform-column select.freeform-input  {
      width: 100%;
   }

}