#contrast{
    background: cyan;
    padding: 30px;
    text-align: center;
    border: 10px solid #999;
    border-radius: 15px;
    font-size: 180%;
    display: block;
    margin-top: 10px;
    box-sizing: border-box;
    width: fit-content;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#content{
    color: rgb(0, 0, 0);
    background: yellow;
    text-align: center;
    padding: 30px;
    width: 100%;
    display: block;
    margin-top: -20px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
#magni{
    color: black;
    background: yellow;
    text-align: center;
    font-size: 180%;
    padding: 30px;
    width: 100%;
    display: block;
    margin-top: 10px;
    box-sizing: border-box;
}
li a{
    color: rgb(18, 37, 199);
   font-size: 180%;
   text-decoration: none;
   display: block;
   width: fit-content;
   max-width: 80%;
   margin-left: auto;
    margin-right: auto;
}
ul{
    list-style: none;
}
#marks{
    border: 10px solid #999;
    border-radius: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
}
#partner{
    border: 10px solid #999;
    border-radius: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
}
#youtube{
    background: cyan;
    color: black;
    text-align: center;
    border: 10px solid #999;
    border-radius: 15px;
    font-size: 180%;
    display: block;
    width: fit-content;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#autos{
   color: black;
    background: yellow;
    text-align: center;
    font-size: 180%;
    padding: 30px;
    width: 100%;
    display: block;
    margin-top: 10px;
    box-sizing: border-box;
}
#justice{
    color: black;
    background: yellow;
    text-align: center;
    font-size: 180%;
    padding: 30px;
    width: 100%;
    display: block;
    margin-top: 10px;
    box-sizing: border-box;
}
#just{
    color: black;
    background: yellow;
    text-align: center;
    font-size: 180%;
    padding: 30px;
    width: 100%;
    display: block;
    margin-top: 10px;
    box-sizing: border-box;
}
#officialis{
    color: black;
    font-size: 180%;
     background: yellow;
    text-align: center;
    padding: 30px;
    width: 100%;
    display: block;
    margin-top: 10px;
    box-sizing: border-box;
}
#markos{
    font-size: 180%;
    background: cyan;
    text-align: center;
    border: 10px solid #999;
    border-radius: 15px;
    display: block;
    width: fit-content;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#bodyblock{
    background: #B8860B;
    
}
#Last{
    background: cyan;
    padding: 30px;
    text-align: center;
    border: 10px solid #999;
    border-radius: 15px;
    font-size: 180%;
    display: block;
    margin-top: 10px;
    box-sizing: border-box;
    width: fit-content;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#Next{
    color: rgb(18, 37, 199);
    font-size: 180%;
    text-decoration: none;
    display: block;
    width: fit-content;
    max-width: 80%;
    margin-left: 10px
    
}
#secondpage{
    background: #ADD8E6;
}
#vidos{
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
#google{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#vidose{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#thirdpage{
    color: black;
    background: rgb(0, 255, 42);
    text-align: center;
    font-size: 180%;
    padding: 30px;
    width: 100%;
    display: block;
    margin-top: 10px;
    box-sizing: border-box;
}
/* style.css — 3 в ряд сверху, 2 снизу по бокам, равные отступы, на весь экран */

:root{
  --page-bg: #556b2f;
  --panel-bg: #800080;
  --gap: 36px;
  --max-width: 1100px;
  --img-size: 220px;
  --img-min: 110px;
  --border: 6px;
  --border-color: #ffffff;
  --radius: 12px;
  --shadow: 0 8px 20px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  min-height:100vh;
  background:var(--page-bg);
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* контейнер занимает весь экран и центрирует сетку */
.container{
  min-height:100vh;
  display:grid;
  place-items:center;                 /* центрирует содержимое */
  padding: calc(var(--gap) * 1.2);
  background: var(--panel-bg);
}

/* внутренняя сетка: 3 колонки x 2 строки, одинаковые промежутки */
.container .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--gap);                    /* одинаковые расстояния между ячейками */
  width: min(var(--max-width), 92vw);
  align-items: center;
  justify-items: center;
}

/* общий стиль для картинок */
.container .grid img {
  display:block;
  width: 100%;
  max-width: var(--img-size);
  min-width: var(--img-min);
  height: auto;
  border-radius: var(--radius);
  border: var(--border) solid var(--border-color);
  box-shadow: var(--shadow);
  background: #ddd;
}

/* Жёсткое позиционирование по ID:
   Верхняя строка: 3 картинки (1,2,3)
   Нижняя строка: 2 картинки по бокам (4 слева, 5 справа), центральная ячейка остаётся пустой */
#bmwlogo1 { grid-column: 1 / 2; grid-row: 1 / 2; justify-self: center; align-self: center; }
#bmwlogo2 { grid-column: 2 / 3; grid-row: 1 / 2; justify-self: center; align-self: center; }
#bmwlogo3 { grid-column: 3 / 4; grid-row: 1 / 2; justify-self: center; align-self: center; }

#bmwlogo4 { grid-column: 1 / 2; grid-row: 2 / 3; justify-self: center; align-self: center; }
#bmwlogo5 { grid-column: 3 / 4; grid-row: 2 / 3; justify-self: center; align-self: center; }

/* адаптив: планшеты */
@media (max-width: 920px){
  :root{
    --gap: 24px;
    --img-size: 180px;
    --img-min: 100px;
    --border: 5px;
  }
  .container .grid{ width: 96vw; }
}

/* адаптив: телефоны — перестраиваем в колонку, но сохраняем порядок и равные отступы */
@media (max-width: 420px){
  :root{
    --gap: 16px;
    --img-size: 86vw;
    --img-min: 86vw;
    --border: 4px;
  }

  .container .grid{
    display:flex;
    flex-direction:column;
    gap:var(--gap);
    width:100%;
    align-items:center;
    justify-content:center;
  }

  .container .grid img{
    max-width: var(--img-size);
    min-width: var(--img-min);
  }
}