.hero {
  position: relative;
  display: flex;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-dark);
}

.sea {
  aspect-ratio: auto;
  height: var(--device-hero-section-height);
  padding: 0;
  background-color: var(--surface-dark);
}

.hero-bg,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-bg {
  display: none;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

html[data-device-type="mobile"] .hero-bg-mobile,
html[data-device-type="minTablet"] .hero-bg-mobile,
html[data-device-type="tablet"] .hero-bg-desktop1200 {
  display: block;
}

html[data-device-type="mobile"] .hero-bg-mobile,
html[data-device-type="minTablet"] .hero-bg-mobile {
  object-fit: cover;
  object-position: left center;
}

html[data-device-type="desktop"] .hero-bg-desktop1200,
html[data-device-type="desktop1280"] .hero-bg-desktop1280 {
  display: block;
}

html[data-device-type="desktop1920"] .hero-bg-desktop1920,
html[data-device-type="desktop2560"] .hero-bg-desktop2560 {
  display: block;
}

#home-hero .hero-bg-desktop1200,
#home-hero .hero-bg-desktop1280,
#home-hero .hero-bg-desktop1920,
#home-hero .hero-bg-desktop2560 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  z-index: 0;
  pointer-events: none;
}

#home-hero-text {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

#home-hero-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 100%;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

#home-hero-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#home-hero-icons .hero-icons-row {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

#home-hero-icon-logo,
#home-hero-icon-hand {
  display: block;
  max-width: 100%;
  height: auto;
}

html[data-device-type="desktop1920"] #home-hero .hero-bg-desktop1920 {
  object-position: left center;
}

html[data-device-type="desktop1920"] .sea {
  min-height: 0;
  aspect-ratio: 2400 / 353;
}

.hero-overlay {
  background: linear-gradient(90deg, var(--hero-overlay-start), var(--hero-overlay-end));
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--white);
  padding: 33px;
  padding-left: 33px;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
}

html[data-device-type="mobile"] .hero-content {
  padding: 16px 0;
}

html[data-device-type="minTablet"] .hero-content {
  padding: 16px 0;
}

html[data-device-type="tablet"] .hero-content {
  padding: 20px 0;
}

html[data-device-type="mobile"] #home-hero-layout,
html[data-device-type="minTablet"] #home-hero-layout,
html[data-device-type="tablet"] #home-hero-layout {
  --hero-safe-extra: 8px;
  --hero-safe-left-ratio: 0.2;
  --hero-safe-min: 100px;
  --hero-safe-max: 180px;

  padding-left: clamp(
    var(--hero-safe-min),
    calc(var(--hero-safe-left-ratio) * 100vw + var(--hero-safe-extra)),
    var(--hero-safe-max)
  );
}

html[data-device-type="minTablet"] #home-hero-layout,
html[data-device-type="tablet"] #home-hero-layout {
  --hero-safe-left-ratio: 0.22;
  --hero-safe-min: 120px;
  --hero-safe-max: 220px;
}

html[data-device-type="desktop"] #home-hero-layout,
html[data-device-type="desktop1280"] #home-hero-layout,
html[data-device-type="desktop1920"] #home-hero-layout,
html[data-device-type="desktop2560"] #home-hero-layout {
  --hero-safe-extra: 16px;
  --hero-safe-left-ratio: 0.17;
  --hero-safe-min: 220px;
  --hero-safe-max: 520px;

  padding-left: clamp(
    var(--hero-safe-min),
    calc(var(--hero-safe-left-ratio) * 100vw + var(--hero-safe-extra)),
    var(--hero-safe-max)
  );
}

html[data-device-type="desktop"] .hero-content,
html[data-device-type="desktop1280"] .hero-content {
  padding-top: 20px;
  padding-right: 33px;
  padding-bottom: 20px;
}

html[data-device-type="desktop1280"] #home-hero-layout {
  --hero-safe-left-ratio: 0.16;
  --hero-safe-min: 220px;
  --hero-safe-max: 280px;
}

html[data-device-type="desktop1920"] #home-hero-layout,
html[data-device-type="desktop2560"] #home-hero-layout {
  --hero-safe-left-ratio: 0.14;
  --hero-safe-min: 260px;
}

html[data-device-type="desktop2560"] #home-hero-layout {
  --hero-safe-extra: 20px;
}

html[data-device-type="desktop2560"] .hero-content {
  padding-top: 24px;
  padding-right: 33px;
  padding-bottom: 24px;
}

#home-hero-content {
  padding-left: 0;
}

@media (max-width: 1279.98px) {
  .hero-content {
    padding: 33px;
    padding-left: 33px;
  }
}


h1,
h2,
h3,
p {
  margin: 0;
}

:where(.page) p,
:where(.page) li,
:where(.page) td,
:where(.page) th {
  font-size: var(--device-body-font-size) !important;
}

:where(.page) h1 {
  font-size: var(--device-h1-font-size) !important;
}

:where(.page) h2 {
  font-size: var(--device-h2-font-size) !important;
}

:where(.page) h3 {
  font-size: var(--device-h3-font-size) !important;
}

h1 {
  letter-spacing: 0.04em;
}

.banner-description {
  color: var(--white);
  font-family: "Museo Sans Cyrl" !important;
  font-size: var(--device-banner-description-font-size) !important;
  font-style: normal;
  font-weight: 400;
}

.banner-platform-title {
  color: var(--white);
  font-family: "Museo Sans Cyrl";
  font-size: var(--device-banner-platform-title-font-size);
  font-style: normal;
  font-weight: 700;
}