// Базовые стили (до 320px) - Очень компактные
.header {
  padding-top: 8px;
  padding-bottom: 15px;
  position: relative;

  &__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 10px;
  }

  &__logo-wrapper {
    flex: 1;
    text-align: center;
    margin-right: 10px;
  }

  &__logo {
    max-width: 140px;
    height: auto;
  }

  &__danger-wrapper {
    flex: 0 0 auto;
  }

  &__danger {
    width: 26px;
    height: 26px;
  }
}

// 320px и выше
@media (min-width: 320px) {
  .header {
    padding-top: 10px;
    padding-bottom: 18px;

    &__logo {
      max-width: 150px;
    }

    &__danger {
      width: 28px;
      height: 28px;
    }
  }
}

// 375px и выше
@media (min-width: $breakpoint-375) {
  .header {
    padding-top: 12px;
    padding-bottom: 20px;

    &__logo {
      max-width: 160px;
    }

    &__danger {
      width: 30px;
      height: 30px;
    }
  }
}

// 425px и выше
@media (min-width: $breakpoint-425) {
  .header {
    padding-top: 14px;
    padding-bottom: 22px;

    &__logo {
      max-width: 170px;
    }

    &__danger {
      width: 32px;
      height: 32px;
    }
  }
}

// 768px и выше
@media (min-width: $breakpoint-768) {
  .header {
    padding-top: 16px;
    padding-bottom: 24px;

    &__logo {
      max-width: 180px;
    }

    &__danger {
      width: 34px;
      height: 34px;
    }
  }
}