html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  position: relative;
}

main,
header,
footer,
section {
  width: 100%;
  max-width: 100%;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

.topbar {
  width: 100%;
  max-width: 100vw;
}

.topbar > *,
.hero > *,
.hero-bottom > *,
.showreel > *,
.work-head > *,
.service > *,
.about > *,
.insta > *,
.contact > *,
footer > * {
  min-width: 0;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 580px) {
  .brand {
    max-width: calc(100vw - 88px);
  }

  .brand b {
    white-space: normal;
  }

  .hero h1,
  .contact h2,
  .contact-mail {
    max-width: 100%;
  }

  .contact-orbit {
    right: -210px;
  }

  footer > div {
    max-width: 100%;
  }
}