* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f0f2f4;
}

.container {
  display: grid;
  grid-template-columns:[startline] 1fr 1fr [middle] 1fr 1fr [endline];
  grid-template-rows: 0.5fr 2.5fr;
  grid-auto-rows: 2.5fr;
  gap: 10px;
  min-height: 100vh;
}

.container1 {
  display: grid;
  grid-template-columns:[startline] 1fr [middle] 3fr [endline];
  grid-template-rows: 5rem auto;
  gap: 10px;
}
.container2 {
  display: grid;
  grid-template-columns:[startline] 1fr 1fr [middle] 1fr 1fr [endline];
  grid-template-rows: 5rem auto;
  grid-auto-rows: auto;
  gap: 10px;
  min-height: 100vh;
}

.container > header {
  display: flex; 
  grid-column: startline/endline;
  background-color: #daf0d0;
}

.container1 > header {
  display: flex; 
  grid-column: startline/endline;
  background-color: #daf0d0;
}
.container2 > header {
  display: flex; 
  grid-column: startline/endline;
  background-color: #daf0d0;
}



.container > div {
  display: flex;
  border: 4px solid #0d1113;
  align-items: center;
  justify-content: center;
  background-color: #d5d8db;
}

.container3 {
  display: grid;
  grid-template-columns:[startline] 1px[middle] 1fr [endline];
  grid-template-rows: auto;
  gap: 10px;
  min-height: 100vh;
}

.spk{
  background-image: url('/images/spk_foto.jpg');
  height: 15rem;
  width: 15rem;
  font-size: 2rem;
}


.spe{
  background-image: url('/images/spe_foto.jpg');
  height: 15rem;
  width: 15rem;
  font-size: 3rem;
}


.ax100{
  background-image: url('/images/ax100_foto.jpg');
  height: 15rem;
  width: 15rem;
  font-size: 2rem;
}


.ax200{
  background-image: url('/images/ax200_foto.jpg');
  height: 15rem;
  width: 15rem;
  font-size: 2rem;
}


.ax300{
  background-image: url('/images/ax300_foto.jpg');
  height: 15rem;
  width: 15rem;
  font-size: 2rem;
}


.ax400{
  background-image: url('/images/ax400_foto.jpg');
  height: 15rem;
  width: 15rem;
  font-size: 2rem;
}


.mda{
  background-image: url('/images/mda_foto.jpg');
  height: 15rem;
  width: 15rem;
  font-size: 2rem;
}

.c {
  grid-column: startline / middle;
  border: 5px solid #9e9ea3;
  font-size: 2rem;
}

.c1 {
  grid-column: startline / middle;
  font-size: 2rem;
}
.c1-1 {
  font-size: 1,5rem;
}

li {
  margin: 1rem;
}

.c2 {
  grid-column: middle / endline;
  border: 5px solid #9e9ea3;
  background-color: #daf0d0;
  font-size: 2rem;
}

.c3 {
  grid-column: startline / endline;
  border: 5px solid #9e9ea3;
  padding: 1rem;
  text-indent: 5px;
  font-size: 1.5rem;
}

.b { 
  padding: 0.2em 5em;
}

.b2 { 
  padding: 0.2em 2em;
}
.b3 {
  display: inline-block;
}

.d {
  display: flex;
  margin-right: 50px;
}

a {
  color: #0d1113;
}

.bolttext {
  color:  #10c807;
  font-weight: 700;
  justify-self: left;
}

.bolttext:hover{
  color: #c87e07;
}

.boxupper {
  margin-top:5rem;
  margin-bottom:5rem;
}

ul.horizontal-list {
  margin: 0; /* Обнуляем значение отступов */
  padding: 4px; /* Значение полей */
 }
 ul.horizontal-list li {
  display: inline-block; /* Отображать как строчный элемент */
  margin-right: 50px; /* Отступ слева */
  padding: 0 0.5rem; /* Поля вокруг текста */
  min-width: 7rem;
  text-align: center;
  cursor: pointer;
 }

 .logo {
  display: inline-block;
  position: relative;
  height: 82px;
  max-width: 190px;
  line-height: 84px;
}


.prod-card {
  background-color: #c5c7c4;
  box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  overflow: hidden;
  min-height: 380px;
  padding: 2rem 1rem;
  
}


.prod-card1 {
  box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 2rem;
  overflow: hidden;
  padding: 2rem 1rem;  
}

.innerbox {
  background-color: #646cc5;
  border: 5px solid #9e9ea3;
  font-size: 1.5rem;
}

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

.container {
  display: grid;
  grid-template-columns:[startline] 1fr [middle] 1fr [endline];
  grid-template-rows: 0.5fr 2.5fr;
  grid-auto-rows: 2.5fr;
  gap: 10px;
  min-height: 100vh;
}


.container1 {
  display: grid;
  grid-template-columns:[startline] 1px[middle] auto [endline];
  grid-template-rows: 5rem auto;
  gap: 10px;
}

.c1 {
  display: none;
}

}