* {
  padding: 0;
  margin: 0;
}

:root { 
  --imr-light-blue: #2968a4;
  --imr-blue: #353972;
  --imr-gray: #8e9193;
  --imr-bg-white: #ffffff;
}

body {
  min-height: 1580px;
  background: var(--imr-bg-white);
}

section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.leftbar {
  grid-column: 1/3;
}

.container {
  padding: 1rem;
  grid-column: 3/11;
}

.rightbar {
  grid-column: 11/13;
}

/* @media (max-width: 1300px) {
  .leftbar {
    grid-column: 1/4;
  }

  .container {
    padding: 1rem;
    grid-column: 4/10;
  }

  .rightbar {
    grid-column: 10/13;
  }
}

@media (max-width: 1000px) {
  .leftbar {
    grid-column: 1/4;
  }

  .container {
    padding: 1rem;
    grid-column: 4/10;
  }

  .rightbar {
    grid-column: 10/13;
  }
}

@media (max-width: 700px) {
  .leftbar {
    display: block;
    
  }

  .container {
    padding: 1rem;
    display: block;
   
  }

  .rightbar {
    display: block;
  
  }
} */

footer {
  display: block;
  color: #ffffff;
  background-color: var(--imr-light-blue);
  padding: 1rem;
  text-align: center;
  font-size: 1rem;
}

/* 

@media (max-width: 1024px) {
	
}

@media (max-width: 768px) {
	
}

@media (max-width: 480px) {
	
}

@media (max-width: 320px) {
	
}
* ПК – 1920 px файл, контент под 1280 px без учета отступов на скролл и отступов справа и слева;
* Планшет 1024 px без учета отступов на скролл и отступов справа и слева;
* Планшет 768 px без учета отступов справа и слева;
* Смартфоны 480 px без учета отступов справа и слева;
* Смартфоны 320 px без учета отступов справа и слева;


Отступы:
* Мобильные 10-15
* Планшет 15-20 px. Для разрешения в 1024 px использую холст на 1000 px это за вычетом скроллинга, потом от него отнимаю отступы.
* ПК контентная часть делаю в размер 1200 px, отступы зависят от сетки.


*/