.hw {
  position: relative;
  height: 599px;
}

.hw::before {
  content: '';
  position: absolute;
  left: var(--glow-bleed);
  right: var(--glow-bleed);
  top: 0;
  height: 599px;
  z-index: -1;
  background: url('../../assets/img/glows/hardware-band.svg') no-repeat -30px -177px / 2038.873px 900.028px;
}

.hw-inner {
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.hw-text {
  position: absolute;
  left: 0;
  top: 137px;
  width: 678px;
}

.hw-title {
  font-size: 43px;
  font-weight: 600;
  line-height: 54px;
  color: var(--color-foreground);
}

.hw-blue {
  color: var(--color-primary);
  font-weight: 900;
}

.hw-body {
  margin: 17px 0 50px;
  font-size: 16px;
  line-height: 25px;
  color: var(--color-foreground);
}

.hw-device {
  position: absolute;
  left: 839px;
  top: 86px;
  width: 312.296px;
  height: 374px;
  background: transparent;
}

.hw-mirrored .hw-text {
  left: 495px;
}

.hw-mirrored .hw-device {
  left: 69px;
}

@media (max-width: 1439px) {
  .hw {
    height: auto;
    padding: 96px 0;
  }

  .hw::before,
  .hw-mirrored::before {
    top: 0;
    height: 100%;
    background:
      radial-gradient(ellipse 34% 60% at 66% 100%, var(--color-hero-tint) 0%, rgba(232, 244, 253, 0) 100%),
      radial-gradient(ellipse 42% 66% at 96% 40%, var(--color-hero-tint) 0%, rgba(232, 244, 253, 0) 100%);
  }

  .hw-mirrored::before {
    background:
      radial-gradient(ellipse 30% 60% at 18% 46%, rgba(5, 134, 211, 0.2) 0%, rgba(226, 238, 251, 0) 100%),
      radial-gradient(ellipse 34% 60% at 84% 48%, rgba(0, 159, 227, 0.25) 0%, rgba(226, 238, 251, 0) 100%);
  }

  .hw-inner {
    display: flex;
    align-items: center;
    gap: 56px;
    width: 100%;
    max-width: var(--page-max);
    height: auto;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
  }

  .hw-mirrored .hw-inner {
    flex-direction: row-reverse;
  }

  .hw-text {
    position: static;
    flex: 1 1 380px;
    width: auto;
  }

  .hw-device {
    position: static;
    flex: 0 1 312px;
    width: 100%;
    max-width: 312px;
    height: auto;
  }
}

@media (max-width: 1023px) {
  .hw {
    padding: 72px 0;
  }

  .hw-inner {
    gap: 32px;
  }

  .hw-title {
    font-size: 36px;
    line-height: 1.25;
  }

  .hw-body {
    margin: 16px 0 32px;
  }

  .hw-device {
    flex: 0 1 222px;
    max-width: 222px;
  }
}

@media (max-width: 640px) {
  .hw {
    padding: 56px 0;
  }

  .hw-inner,
  .hw-mirrored .hw-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .hw-title {
    font-size: 28px;
  }

  .hw-device {
    flex: none;
    max-width: 222px;
    margin: 0 auto;
  }
}