@media only screen and (min-width: 1700px) {
  
  .card{
    /*margin: var(--padding) var(--padding) var(--padding) var(--padding);*/
    margin: var(--padding) auto;
  }

}


@media only screen and (max-width: 1700px) {
  
  .card{
    margin: var(--padding) var(--padding) var(--padding) var(--padding);
  }
  footer{
     margin: calc(var(--padding) / 2) var(--padding) calc(var(--padding) / 2) var(--padding); 
  }
}

@media only screen and (max-width: 1400px) {

  .exhibit3{
    position: unset;
    display: block;
    margin: 0 auto;
    transform: translateX(0%);
    padding-bottom: 3em;
    width: 100%;
  }

}

@media only screen and (max-width: 1080px) {

  :root{
    --orange: #E74420;
    --black: black;
    --white: white;
    --grey: #B1B1B1;
    --padding: 40px;
  }
  
  .card{
    margin: var(--padding) var(--padding) var(--padding) var(--padding);
  }

  #lockup{
    top: calc( var(--padding) / 2);
  }

  #dots{
   top: 45%; 
  }

  #artscouncil{
    height: 13%;
  }

  #texts{
    width: 40%;
  }

}



@media only screen and (max-width: 960px) {
  
  html{
    font-size: clamp(18px, 1.5vw, 28px);
  }

  .cardinner{
    column-count: 1;
    padding: 0 var(--padding) calc(var(--padding) + 1rem ) var(--padding);
  }
  .card .projtext, .footnotes-container{
    column-count: 1;
  }

  #colophon h3{
    margin-bottom: 1.25em;
  }

  .colophoninner{
    font-size: 0.75em;
    line-height: 1.25em;
  }

  .aside{
    position: relative;
    left: 0;
  }

  .buttonS{
        /*position: relative;
    left: var(--padding);
    margin: 0 auto;
    padding-left: 0;
    transform: translateX(50%);
    bottom: calc(var( --padding) + 1rem );*/
  }



}

@media only screen and (max-width: 720px) {

  :root{
    --orange: #E74420;
    --black: black;
    --white: white;
    --grey: #B1B1B1;
    --padding: 30px;
  }

  #essay.card{
    background-color: rgba(0, 0, 0, 0) !important;
    max-height: unset;
  }

  .essayitem{
    /*height: calc( ( (100vw - ( 2 * var(--padding) )  ) * 0.4517133956) );*/
    /*margin-bottom: var(--padding);*/
    padding: var(--padding) 0;
    height: unset;
  }

  .essayitem header{
    position: relative;
    transform: none;
    top: unset;
    left: unset;
    padding-bottom: calc( var(--padding) / 1.5);
  }

  .essayitem:hover{
    top: 0em;
  }

  .card h3{
    margin-bottom: 1.25em;
  }

  #lockup{
    top: calc( var(--padding) / 2);
  }

  #dots{
   top: 45%; 
  }

  #artscouncil{
    height: 15%;
  }

  #texts{
    width: 45%;
  }

  .width{
  max-width: unset;
  }

  .card.finisher span svg{
    top: calc( 100% + 1.5em);
  }
  .card.finisher:hover span svg{
    top: calc( 100% + 2em);
  }



}


@media only screen and (max-width: 640px) {

  :root{
    --orange: #E74420;
    --black: black;
    --white: white;
    --grey: #B1B1B1;
    --padding: 25px;
  }

  html{
    font-size: clamp(16px, 1.5vw, 28px);
  }

  h2{
   /* line-height: 1.25em;
    margin-top: -0.25em;*/
        padding-left: calc( var(--padding) / 2);
    padding-right: calc( var(--padding) / 2);
  }

  #lockup{
    top: calc( var(--padding) / 2);
  }

  #dots{
   top: 45%; 
  }

  #artscouncil{
    height: 16%;
  }

  #texts{
      width: 47.5%;
  }

  #colophon{
    max-height: unset;
  }
  .colophoninner{
    padding-bottom: 0;
    column-count: 2;
  }


}


@media only screen and (max-width: 540px) {

  :root{
    --orange: #E74420;
    --black: black;
    --white: white;
    --grey: #B1B1B1;
    --padding: 20px;
  }

  .width{
    display: none;
  }

  .cardlimit{
    max-height: calc( (100vw - ( 2 * var(--padding) )  ) * 0.85);
  }

}