@media screen and (max-width: 1300px) {
  :root {
    --unit: 14px;
  }

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

@media screen and (max-width: 1150px) {
  nav .logo h1,
  .home main p,
  .collectifs main .text * {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  nav .logo img {
    width: 10vw;
  }

  main {
    grid-area: 2 / 2 / 18 / 7; 
  }

  #page-1 main,
  #page-1029 main {
    grid-area: 2 / 2 / 13 / 7; 
  }

  .collectif main,
  .Projet main {
    grid-template-columns: repeat(5, 1fr);
  }

  .collectif main .content,
  .Projet main .content {
    grid-column: 2 / 6;
  }

  .collectif main > img,
  .Projet main .content img {
    grid-column: 1 / 6;
  }

  .Projet main .images {
    grid-column: 2/6;
  }

  .partenaires main .imagesPartenaires img {
    max-height: 75px;
  }

  footer {
    grid-area: 16 / 1 / 18 / 2; 
    padding: 0 var(--unit);
  }


  #page-1 footer,
  #page-1029 footer {
    grid-area: 11 / 1 / 13 / 2; 
  }

  footer img {
    height: 20px;
  }
}

@media screen and (max-width: 900px) {
  .home main {
    grid-area: 2 / 2 / 16 / 7;
    padding-right: var(--unit);
  }

  .artistes main .columns,
  .collectifs main .columns,
  .projets main .columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .Projet main .content iframe {
    width: 100%;
    margin-left: 0;
  }

  .timeline .event-open {
    width: 33vw;
  }

}

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

  nav .logo .imagesLogo {
    position: absolute;
    right: 15vw;
    top: 5vh;
  }

  .home nav .logo .imagesLogo {
    left: 1vw;
  }


  nav .logo img {
    width: 10vw;
  }

  main {
    grid-area: 2 / 1 / 18 / 7;
    padding: var(--unit);
  }

  #page-1 main,
  #page-1029 main {
    grid-area: 2 / 1 / 13 / 7; 
  }

  #page-1 main {
    grid-area: 3 / 1 / 18 / 7;
  }

  main h2 {
    padding-top: calc(var(--unit) / 2);
  }

  .collectif main,
  .Projet main,
  .contact main {
    display: initial;
  }

  .collectif main aside,
  .Projet main aside {
    position: relative;
    height: auto;
  }

  footer {
    display: none;
  }

  .timeline .event-open {
    width: 50vw;
  }

}

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

  body{
    font-size: calc(var(--unit) * 1.5)
  }

  p {
    font-size: 1.25rem;
    line-height: 1.7rem;
  }

  .mobile {
    display: block;
  }

  nav {
    grid-template-columns: repeat(1, 1fr);
    display: block;
  }

  nav .logo a {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
  }

  nav .logo a h1 {
    width: 80%;
    text-align: right;
    padding: var(--unit);
    font-size: 2rem;
  }

  nav .logo a div {
    width: 20%;
  }

  .home nav .logo .imagesLogo{
    left: initial;
    padding: var(--unit);
  }

  nav .logo .imagesLogo,
  nav .logo img {
    position: relative;
    left: initial;
    right: initial;
    top: initial;
  }

  nav .logo .imagesLogo {
    margin-left: var(--unit);
    margin-top: calc(var(--unit) / 2);
  }

  nav .logo img {
    margin-top: 0;
    margin-right: 0;
    width: 100%;
  }

  nav > ul {
    display: none;
  }

  nav.visible{
    background: white;
    position: fixed;
    height: 100vh;
    width: 100vw;
  }

  nav.visible > ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
  }

  nav.visible > ul li {
    border-left: none;
    border-top: 1px solid;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 0;
  }

  #page-1 main,
  #page-1029 main {
    grid-area: 2 / 1 / 12 / 7;
  }

  .home main .more {
    width: calc(100% - var(--unit) / 0);
    margin-left: 0;
  }

  .souvenirs main div.souvenir iframe,
  .souvenirs main div.souvenir img {
    width: 100%;
    max-height: none;
  }
  
  .timeline {
    grid-area: 12 / 1 / 18 / 7;
    font-size: 1rem;
  }

  .timeline .line .day {
    width: 2vw;
    height: 4vh;
  }

  .timeline .event-open {
    width: 75vw;
  }
}