.lp-page .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 223px;
  height: 40px;
  overflow: hidden;
  background: var(--img-logo) center / contain no-repeat;
  color: var(--blue);
  font-size: 0;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.lp-page .logo span:not(.logo__mark) { opacity: 0; }
.lp-page .logo__mark {
  width: 42px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font: 700 22px/1 Poppins, sans-serif;
  background: linear-gradient(135deg, var(--blue), var(--blue3));
  opacity: 0;
}

.lp-page .header .logo,
.lp-page .footer .logo {
  width: 223px;
  height: 40px;
  overflow: hidden;
  background-image: var(--img-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 247px 247px;
  font-size: 0;
}

.lp-page .header .logo {
  width: 203px;
  height: 36px;
  background-size: 224px 224px;
}

.lp-page .header .logo span:not(.logo__mark),
.lp-page .header .logo .logo__mark {
  opacity: 0;
}