.header-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: left;
  margin: 200px;
  position: absolute; /* Изменяем на абсолютное позиционирование */
  top: 15px; /* Устанавливаем отступ сверху */
  left: 5%; /* Смещаем на 25% от левого края */
  height: 110px;
  width: auto;
  border-radius: 5%;
}

.header-left {
  flex-basis: 33%;
  text-align: left  ;
}

.header-right {
  flex-basis: 67%;
}

#coop {
  width: calc(33.33% - 40px); /* Ustawiamy szerokość na 1/3 szerokości elementu .header-section minus marginesy */
  text-align: left;
  font-size: 3.33vw; /* Ustawiamy font-size na 33.33vw, co odpowiada 1/3 szerokości okna przeglądarki */
  margin-top: 0;
  display: inline-block; /* Ustawiamy na inline-block, aby tekst zajął tylko niezbędne miejsce */
  max-width: 10%; /* Ustawiamy maksymalną szerokość na 100% */
}

.slogan {
  font-size: 18px;
  margin-top: 10px;
}

.onas {
  max-width: 100%; /* Ustawiamy maksymalną szerokość obrazka na 100%, aby zmieścił się w dostępnym miejscu */
}

@media (orientation: portrait) {
  .header-section {
    margin: 20px;
    position: static; /* Возвращаем статическое позиционирование */
    top: auto; /* Сбрасываем значение отступа сверху */
    left: auto; /* Сбрасываем значение смещения слева */
    grid-template-columns: 1fr; /* Устанавливаем одну колонку в сетке */
    height: auto; /* Сбрасываем фиксированную высоту */
    width: auto; /* Сбрасываем фиксированную ширину */
    border-radius: 0; /* Сбрасываем значение border-radius */
  }

  .header-left {
    flex-basis: auto; /* Сбрасываем значение flex-basis */
    text-align: center; /* Центрируем текст */
  }

  .header-right {
    flex-basis: auto; /* Сбрасываем значение flex-basis */
    margin-top: 20px; /* Добавляем отступ сверху */
  }

  #coop {
    width: 100%; /* Устанавливаем ширину на 100% */
    max-width: none; /* Сбрасываем значение максимальной ширины */
    margin-top: 10px; /* Добавляем отступ сверху */
    font-size: 72px; /* Уменьшаем размер шрифта */
    display: block; /* Устанавливаем на блочный элемент */
    text-align: center; /* Центрируем текст */
  }

  .slogan {
    font-size: 14px; /* Уменьшаем размер шрифта */
    margin-top: 5px; /* Уменьшаем отступ сверху */
  }

  .onas {
    max-width: 100%; /* Устанавливаем максимальную ширину на 100% */
  }
}
