/* Mobile */

@media screen and (max-width:57.4375em) {
  body {
    --toc-width: 23%;
    --thumbnail-height: 40px;
    --body-f: 12px;
    --toc-pdg: 0.4rem;
  }

  /* horizontal mobile toc */
  .table-of {
    width: 100%;
    overflow-x: scroll;
    
    /* float: unset; */
  }

  .contents {
    margin: 0;
    float: unset;
  }

  .table-of ul {
    display: flex;
    flex-flow: row;
  }

  .table-of ul li {
    min-width: 100px;
  }

  .table-of ul li:not(:last-of-type) {
    border-right: var(--border-style);
  }

  nav li {
    padding: 0.75rem var(--toc-pdg); 
  }
  
  .table-of li .thumbnail {
    padding: 1px;
  }

  .projects-container {
    grid-template-columns: 1fr; 
    grid-template-rows: auto;
  }

  .proj-imgs {
    grid-row: 1/2;
  }

  .proj-desc {
    grid-column: 1/2;
    grid-row: 2/3;
    position: relative;
    top: unset;
    padding-left: 0;
  }

  .proj-imgs .image:not(:last-of-type) {
    margin-bottom: -5px;
  }

  .proj-imgs .image:last-of-type{
    margin-bottom: 3px;
  }
  
  .proj-desc h1 {
    font-size: 1.2rem;
  }

  .proj-desc .sxn {
    padding: 0.35rem;
  }

  .proj-desc .sxn:last-child {
    border-bottom: none;
  }

  figure.frame {
    padding: 5%;
  }

  figure.mobile {
    height: 70vh;
  }  

  .info .image-inset {
    flex-flow: column;
    align-items: center;
  }

  .info .image-inset.all-vids {
    flex-flow: row;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 auto;
  }

  .info .image-inset.all-vids .image-container {
    width: 43%;
    max-width: 180px;
    padding-top: 1.5rem;
  }

  .info .image-inset.all-imgs .image-container:nth-of-type(2) {
    padding-top: 1.8rem;
  }
}

@media screen and (max-width:43.6875em) {

  .projects-container {
    max-width: 98vw;
  }

	.small-only {
		display: none;
	}

  .info .image-inset {
    margin: 0;
    width: 100%;
  }

  .info picture {
    width: 100%;
    height: auto;
  }

  .info .image-inset.all-imgs .image-container {
    padding: 0;
  }
  
  .info .image-inset .no {
    font-size: 0.8rem;
  }

  .projects-container .info picture img {
   max-width: 100%;
   max-height: 300px; 
   height: 100%;
   min-height: 180px;
  }

  .info .caption-container {
    font-size: 1.1rem;
    width: 98%;
    line-height: 1;
    margin-bottom: 1.8rem;
  }

}


/* "15 Large */

@media screen and (min-width:96em) {
	body {
		grid-template-columns: minmax(300px,1fr) minmax(660px,3fr);
	}
	.body {
		grid-template-columns: minmax(300px, 1.43fr) minmax (660, 3.25fr)
	}

}