/* CSS для изополей напряжений/деформаций - точно как в эпюрах */
.isopleth-container {
  display: block; /* Используем обычный блок вместо grid */
  width: 100%;
  height: 600px;
  position: relative; /* Для правильного позиционирования float элементов */
}

/* Общие стили для обоих панелей */
.isopleth-panel {
  width: 48%; /* Точно как в эпюрах */
  display: inline-block;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
}

/* Правая панель с float:right как в эпюрах */
.strain-panel {
  float: right;
}

/* При узком экране - в столбик */
@media (max-width: 1200px) {
  .isopleth-container {
    height: 1200px;
  }
  
  .isopleth-panel {
    width: 100%;
    height: 48%;
    margin-bottom: 4%;
  }
  
  .strain-panel {
    float: none;
  }
}

.stress-panel {
  background-color: white;
  border: 5px solid #b0c4de;
}

.strain-panel {
  background-color: white;
  border: 5px solid #f08080;
}