* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: #fff;
}

body {
  overflow-x: hidden;
}

.canvas {
  position: relative;
  width: min(100vw, 1440px);
  aspect-ratio: 1440 / 900;
  margin: 0 auto;
  background: #fff;
}

.sag-panel {
  position: absolute;
  left: 29.444449%;
  top: 17.222236%;
  width: 42.696631%;
  height: 65.611111%;
}

.sag-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.contact-lines {
  position: absolute;
  left: 4.521441%;
  top: 82.952243%;
  width: 91.64%;
  color: #fff;
  font-family: "Archivo", Arial, sans-serif;
  font-size: calc(min(100vw, 1440px) * 0.010345766);
  font-weight: 600;
  line-height: 1;
}

.contact-line {
  display: block;
  width: max-content;
  white-space: nowrap;
  transform-origin: left center;
}

.line-one {
  margin: 0;
}

.line-two {
  margin-top: calc(min(100vw, 1440px) * 0.010072917);
}

.line-three {
  margin-top: calc(min(100vw, 1440px) * 0.010072917);
}

.contact-lines a,
.contact-lines a:visited {
  color: inherit;
  text-decoration: none;
}

.contact-lines a:hover,
.contact-lines a:focus-visible {
  opacity: .72;
}

.contact-lines a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .canvas {
    width: 100vw;
    aspect-ratio: 393 / 288;
  }

  .sag-panel {
    left: 20.610687%;
    top: 7.986111%;
    width: 58.828774%;
    height: 77.099880%;
  }

  .contact-lines {
    left: 4.725338%;
    top: 81.472094%;
    width: 91.30%;
    font-size: calc(100vw * 0.015124516);
  }

  .line-two,
  .line-three {
    margin-top: calc(100vw * 0.012436386);
  }
}