body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#container {
    display: grid;
    grid-template-columns: 800px 1fr 1fr;
    grid-template-rows: auto 80px auto;
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}

#intro {
grid-row: 1/2;
    grid-column: 1/2;
    background-color: #f4f4f4;
    padding: 10px;
}

#ref {
grid-row: 1/2;
    grid-column: 2/4;
    background-color: #f4f4f4;
    padding: 10px;
}

#controls {
display: grid;
    grid-template-columns: 1fr 1fr;
/*        flex-direction: column;*/
grid-row: 2/3;
grid-column: 2/3;
    background-color: #f0f0f0;
    padding: 10px;
/*    gap: 10px;*/
    align-items: center;
align-self: auto;
/*    box-sizing: border-box;*/
    grid-auto-rows: minmax(80px, auto);
}

#controls label {
    margin-right: 5px;
}

#controls select {
/*    flex: 2 3 auto; /* Расширяется по мере необходимости */
    max-width: 250px; /* Ограничение ширины для больших экранов */
/*    box-sizing: border-box;*/
}

#lenses {
display: grid;
grid-row: 2/3;
grid-column: 2/3;
    background-color: #f0f0f0;
    padding: 10px;
    gap: 10px;
    align-items: scretch;
    align-self: auto;
    box-sizing: border-box;
    height: 80px;
}
#cameras {
display: grid;
grid-row: 2/3;
grid-column: 3/4;
    background-color: #f0f0f0;
    padding: 10px;
    gap: 10px;
    align-items: scretch;
    align-self: auto;
    box-sizing: border-box;
    height: 80px;
}

#diagram {
    grid-column: 1 / 2; /* Занимает первую колонку */
    grid-row: 2 / 4; /* Третья и четвёртая строки */
    padding: 10px;
    box-sizing: border-box;
            border: 1px solid #ccc;
/*            width: 80vmin;
            height: 80vmin;
*/            max-width: 800px;
            max-height: 800px;
            background-color: #f9f9f9;
}

#drawing {
    grid-column: 1 / 2; /* Занимает первую колонку */
    grid-row: 2 / 4; /* Третья и четвёртая строки */
    padding: 10px;
    box-sizing: border-box;
            border: 1px solid #ccc;
/*            width: 80vmin;
            height: 80vmin;
*/            max-width: 800px;
            max-height: 800px;
            background-color: #f9f9f9;
}

#compatibility {
    grid-column: 2 / 4; /* Вторая колонка */
    grid-row: 3 / 4; /* Третья строка */
    background-color: #d4d4d4;
    padding: 10px;
    box-sizing: border-box;
    align-items: start;
/*    align-self: stretch;*/
}

/* Стили для узкого экрана */
@media (max-width: 1240px) {
    #container {
  justify-self: center;
        max-width: 800px; /* Одна колонка */
        grid-template-columns: auto; /* Одна колонка */
        grid-template-rows: auto; /* Элементы в одну колонку */
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
"intro"
"ref"
"drawing"
"controls"
"compatibility";
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
    }
    #intro
    {
grid-column: 1/3;
grid-row: 1/2;
    }
    #ref
    {
grid-column: 1/3;
grid-row: 2/3;
    }

    #drawing
    {
grid-column: 1/3;
grid-row: 3/4;
    }
    #lenses
    {
grid-column: 1/2;
grid-row: 4/5;
    }
    #cameras
    {
grid-column: 2/3;
grid-row: 4/5;
    }
    #compatibility
    {
grid-column: 1/3;
grid-row: 5/6;
    }

    #controls {
grid-column: 1/2;
grid-row: 4/5;
/*        flex-direction: column;*/
        align-items: stretch;
    }

    #controls select {
        width: 100%; /* Растягиваем селекторы на всю ширину */
    }
}