.header {
  /* background-color: var(--main-color);  */
  background-color: rgb(246, 143, 215);
  color: var(--dark-text-color);
  min-height: 60px;
  position: fixed;
  transition: .5s ease;
  width: 100%;
  z-index: 5;
}

.header.open {
  background-color: var(--main-color-hover);
  color: var(--light-text-color);
}

.header__content {
  display: flex;
  align-items: center;
  height: calc(15px + 0.9rem);
  justify-content: space-between;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 3.5rem;
}

.header__logo__icon {
  fill: var(--dark-text-color);
  width: 30px;
}

.open .header__logo__icon {
  fill: var(--light-text-color);
  transition: .6s ease;
}

.header__logo__title {
  font-size: 2.1rem;
  font-weight: 700;
}

@media screen and (min-width: 0) {
  .header {
    padding-block: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .header {
    display: flex;
    align-items: center;
    height: 60px;
    justify-content: space-between;
    padding-block: 2rem;
  }
}