/* MAIN, HEADER, SECTION, FOOTER */

main,
nav,
section,
footer {
  width: 152rem;
  margin: 0 auto 0 auto;
}

section,
footer {
  grid-template-rows: auto;
}

section {
  padding: 0;

  grid-template-columns: repeat(4,38rem);

  align-items: end;
}

footer {
  contain-intrinsic-size: 16.8rem; /* 7 lines */
  height: 16.8rem; /* 7 lines */
  padding: 2.4rem 0 7.2rem 0; /* t1 b3 */

  grid-template-columns: 152rem;

  text-align: center;
}





/* IMAGES */

a.c:active > .i,
a.c:focus > .i,
a.c:hover > .i,
a.c > .i {
  -webkit-transition: opacity .2s ease-in-out;
     -moz-transition: opacity .2s ease-in-out;
      -ms-transition: opacity .2s ease-in-out;
       -o-transition: opacity .2s ease-in-out;
          transition: opacity .2s ease-in-out;
}

a.c:active,
a.c:focus,
a.c:hover,
a.c {
  -webkit-transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
     -moz-transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
      -ms-transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
       -o-transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
          transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

a.c:active > .i,
a.c:focus > .i,
a.c:hover > .i {
  opacity: .9;
}

a.c:active,
a.c:focus,
a.c:hover {
  background-color: var(--clrb1);
  box-shadow: 0 0 0 1.2rem var(--clrb1);
}

a.c:active,
a.c:focus,
a.c:hover {
  color: var(--clr15);
}

a.c {
  background-color: transparent;
  box-shadow: 0 0 0 1.2rem transparent;
  color: var(--clr240);
  position: relative;
  display: block;
  width: 30rem;
  height: auto;
  margin: 0 4rem 4.8rem 4rem;
  padding: 0;

  text-align: center;
}

.i {
  background-color: var(--clrb1);
  box-shadow: 0 0 0 .1rem var(--clr225);
  color: var(--clrb1);
  object-fit: cover;
  opacity: 1;

  position: relative;
  width: 30rem;
  height: auto;
  margin: 0;
  padding: 0;
}

.a11 { aspect-ratio: 1/1; margin-top: 1.2rem; }
.a34 { aspect-ratio: 3/4; margin-top: .8rem; }
.a45 { aspect-ratio: 4/5; margin-top: .9rem; }
.a16 { aspect-ratio: 10/16; }





/* TEXT */

p {
  font-size: 1.3rem;
  line-height: 2rem;
  margin: .926rem 0 -.526rem 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

footer > p {
  font-size: 1.2rem;
  line-height: 2rem;
  margin: .964rem 0 -.564rem 0;
}





/* NAVIGATION */

nav {
  position: relative;
  display: block;

  text-align: center;
}

nav.n1 {
  height: 19.2rem; /* 8 lines */
  padding: 7.2rem 0 7.2rem 0; /* t3 b3 */
}

nav.n2 {
  height: 9.6rem; /* 4 lines */
  padding: 2.4rem 0 4.8rem 0; /* t1 b2 */
}

nav.n3 {
  height: 9.6rem; /* 4 lines */
  padding: 7.2rem 0 0 0; /* t3 */
}

li {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 2rem;
  height: 2.4rem;
  margin: .926rem 0 -.526rem 0;
  padding: 0 0 0 4.8rem;
}





/* MACBOOK */

@media all and (max-width: 1440px) {
  main,
  nav,
  section,
  footer {
    width: 136rem;
  }
  
  section {
    grid-template-columns: repeat(4,34rem);
  }
  
  footer {
    grid-template-columns: 136rem;
  }

  a.c {
    margin: 0 2rem 4.8rem 2rem;
  }
}

/* IPHONE */

@media all and (max-width: 960px) {
  main,
  nav,
  section,
  footer,
  a.c {
    width: 90vw;
  }

  main {
    margin: 0 5vw 0 5vw;
  }
  
  section,
  footer {
    margin: 0;
    grid-template-columns: 90vw;
  }

  footer {
    contain-intrinsic-size: 20vw;
    height: 20vw;
    padding: 0 0 5vw 0;
  }

  a.c:active,
  a.c:focus,
  a.c:hover {
    box-shadow: 0 0 0 5vw var(--clrb1);
  }

  a.c {
    color: var(--clr38);

    height: auto;
    margin: 0 0 15vw 0;
    padding: 0;
  }

  .i {
    width: 96vw;
    margin-left: -3vw;
  }

  .a11 { margin-top: 4vw; }
  .a34 { margin-top: 2vw; }
  .a45 { margin-top: 0; }
  .a16 { margin-top: 1.4vw; }
  
  nav {
    margin: 0;
  }

  nav.n1 {
    height: 40vw;
    padding: 15vw 0 20vw 0;
  }

  nav.n2 {
    height: 30vw;
    padding: 5vw 0 20vw 0;
  }

  nav.n3 {
    height: 10vw;
    padding: 5vw 0 0 0;
  }

  li {
    height: 5vw;
    padding: 0 0 0 10vw;
  }

  li, p, footer > p {
    font-size: 3vw;
    line-height: 5vw;
    margin: 1.41vw 0 -1.41vw 0;
  }
}