/* MAIN, HEADER, SECTION, FOOTER */

main,
header,
section,
footer {
  width: 120rem;
}

main {
  margin: 0 0 0 auto;
}

header,
section,
footer {
  grid-template-columns: 60rem;
  grid-template-rows: auto;
}

header {
  padding: 19.2rem 0 12rem 0; /* t8 b5 */
}

section {
  padding: 0;
}

section:has(h2) {
  padding: 0 0 2.4rem 0; /* b1 */
}

section:has(h2+p,p) {
  padding: 0 0 7.2rem 0; /* b3 */
}

footer {
  contain-intrinsic-size: 21.6rem; /* 9 lines */
  height: 21.6rem; /* 9 lines */
  padding: 12rem 0 2.4rem 0; /* t5 b1 */
}





/* TEXT */

h1 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 3rem;
  margin: .024rem 0 -.624rem 0;
}

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

p {
  font-size: 1.6rem;
  line-height: 2.4rem;
  margin: .616rem 0 -.616rem 0;
}

.h1-2 {
  margin-bottom: -1.2rem;
  text-indent: -2.4rem;
  margin-left: 2.4rem;
}





/* IMAGES */

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

  position: relative;
  margin: 0 2.4rem 2.4rem 0;
  padding: 0;
}

.v {
  background-color: var(--clrb1);
  box-shadow: 0 0 0 .1rem var(--clr210);

  position: relative;
  margin: 0 2.4rem 2.4rem 0;
  padding: 0;
}

.i1 { width: 117.6rem; } /* 1 column */
.i2 { width: 57.6rem; } /* 2 columns */
.i3 { width: 37.6rem; } /* 3 columns */
.i4 { width: 27.6rem; } /* 4 columns */
.i5 { width: 21.6rem; } /* 5 columns */

section:has(.i1) { grid-template-columns: 120rem; }
section:has(.i2) { grid-template-columns: repeat(2,60rem); }
section:has(.i3) { grid-template-columns: repeat(3,40rem); }
section:has(.i4) { grid-template-columns: repeat(4,30rem); }
section:has(.i5) { grid-template-columns: repeat(5,24rem); }

.asp11   { aspect-ratio: 1/1; }
.asp21   { aspect-ratio: 2/1; }
.asp34   { aspect-ratio: 3/4; }
.asp43   { aspect-ratio: 4/3; }
.asp45   { aspect-ratio: 4/5; }
.asp916  { aspect-ratio: 9/16; }
.asp920  { aspect-ratio: 9/20; }
.asp1016 { aspect-ratio: 10/16; }
.asp169  { aspect-ratio: 16/9; }
.asp1610 { aspect-ratio: 16/10; }
.asp207  { aspect-ratio: 20/7; }

/* 1501 KIMEP Times */
.i1.i1501 { height: 165.6rem; }
.i2.i1501 { height: 81.6rem; }

.i1.i1502 { height: 48rem; }

/* 1602 Everythink */
.i1602 { height: 340.8rem; }

/* 1903 Almatygiprogor */
.i1.i1903 { height: 83.16rem; }
.i2.i1903 { height: 40rem; }

/* 2001 Standart */
.i2001 { height: 235.2rem; }

/* 2101 Talentli */
.i1.i2101 { height: 436.8rem; }
.i2.i2101 { height: 38.4rem; }

/* 2301 Dom36 */
.i1.i2301 { height: 83.16rem; }





/* NAVIGATION */

nav {
  color: var(--clr38);
  position: fixed;
  display: block;
  left: 3.6rem;
  width: 28.4rem;
  height: auto;
  margin: 0;
}

nav:focus,
nav:hover {
  color: var(--clr15);
}

nav.n1 {
  top: 2.8rem;
  padding: 0 0 6rem 0;
}

nav.n2 {
  bottom: 3.2rem;
  padding: 6rem 0 0 0;
}

li {
  font-size: 1.2rem;
  line-height: 2rem;
  height: 2rem;
  margin: .564rem 0 -.564rem 0;
  padding: 0 0 0 2.4rem;
}





/* IPHONE */

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

  main {
    margin: 0 5vw 0 5vw;
  }
  
  header,
  section,
  section:has(.i,.i1,.i2,.i3,.i4,.i5),
  footer {
    grid-template-columns: 90vw;
  }

  header {
    padding: 0 0 25vw 0;
  }

  section:has(h2) {
    padding: 0 0 5vw 0;
  }

  section:has(h2+p,p) {
    padding: 0 0 15vw 0;
  }
  
  footer {
    contain-intrinsic-size: 45vw;
    height: 45vw;
    padding: 25vw 0 5vw 0;
  }

  h1 {
    font-size: 4.5vw;
    line-height: 5vw;
    margin: 0.84vw 0 -0.84vw 0;
  }

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

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

  .i1,.i2,.i3,.i4,.i5 { width: 96vw; }

  .i1501-1-1 { height: 135vw; }
  .i1501-2-1 { height: 135vw; }

  .i1501-1-2 { height: 40vw; }

  .i1602 { height: 278vw; }
  .i2001 { height: 192vw; }
  .i2101 { height: 356vw; }

  nav {
    position: relative;
    left: 0;
    width: 90vw;
    margin: 0;
  }

  nav.n1 {
    display: none;
  }
  
  nav.n2 {
    bottom: auto;
    padding: 5vw 0 40vw 0;
  }

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

html {
  scrollbar-width: auto;
}

body::-webkit-scrollbar {
  display: auto;
}