@font-face {
  font-family: JetBrains Mono;
  src: url('../fonts/JetBrainsMono-Bold-Italic.ttf') format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: JetBrains Mono;
  src: url('../fonts/JetBrainsMono-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: JetBrains Mono;
  src: url('../fonts/JetBrainsMono-ExtraBold-Italic.ttf') format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: JetBrains Mono;
  src: url('../fonts/JetBrainsMono-ExtraBold.ttf') format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: JetBrains Mono;
  src: url('../fonts/JetBrainsMono-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: JetBrains Mono;
  src: url('../fonts/JetBrainsMono-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: JetBrains Mono;
  src: url('../fonts/JetBrainsMono-Medium-Italic.ttf') format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: JetBrains Mono;
  src: url('../fonts/JetBrainsMono-Italic.ttf') format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-RegularItalic.otf') format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-SemiBoldItalic.otf') format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-SemiBold.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-MediumItalic.otf') format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-Medium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-LightItalic.otf') format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-Light.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-BoldItalic.otf') format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Ciutadella;
  src: url('../fonts/Emtype-Foundry---Ciutadella-Bold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --text--light--paragraph: #535358;
  --text--light--primary: #34353a;
  --text--light--secondary: #8e8e98;
  --dark-grey: #f0f0f0;
  --border--light: #e9eaef;
  --border--translucent: #00000014;
  --dark: #0a0a0a;
  --text--dark--secondary: #ffffff80;
  --text--translucent--secondary: #0006;
  --text--translucent--paragraph: #0009;
  --text--dark--primary: white;
  --text--bytedance--primary: #3370ff;
  --text--translucent--primary: #000c;
  --text--ecrecycle--primary: #01834e;
  --text--ubi--primary: #3999f8;
  --white: white;
  --light-grey: #f7f7f7;
  --background--ecrecycle--secondary: #e1faef;
  --background--ubi--secondary: #edf7ff;
  --dark-light: #141414;
  --black: black;
  --border--dark: #fff3;
  --dark--paragraph: #ffffffb3;
  --text--ecrecycle--secondary: #57b68f;
  --text--ubi--secondary: #5eb4ff;
  --lighter-black: #1f1f1f;
  --bytedance--background--secondary: #f7f9ff;
  --text--rog--primary: #ff4630;
  --text--rog--secondary: #f19dff;
}

body {
  color: var(--text--light--paragraph);
  font-family: Barlow, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 150%;
}

h1 {
  color: var(--text--light--primary);
  letter-spacing: -.5px;
  cursor: default;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Barlow, sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 130%;
}

h2 {
  color: var(--text--light--secondary);
  letter-spacing: -.5px;
  cursor: default;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Barlow, sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 130%;
}

h3 {
  color: var(--text--light--primary);
  letter-spacing: -.5px;
  cursor: default;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Barlow, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 130%;
}

h4 {
  color: var(--text--light--secondary);
  letter-spacing: -.5px;
  cursor: default;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Barlow, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 130%;
}

h5 {
  color: var(--text--light--primary);
  cursor: default;
  margin-top: 0;
  margin-bottom: 0;
  font-family: JetBrains Mono, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
}

h6 {
  color: var(--text--light--secondary);
  cursor: default;
  margin-top: 0;
  margin-bottom: 0;
  font-family: JetBrains Mono, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
}

p {
  cursor: default;
  margin-bottom: 0;
}

a {
  color: var(--text--light--paragraph);
  text-decoration: none;
}

ul {
  margin-bottom: 0;
  padding-left: 1em;
}

ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

li {
  cursor: default;
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 150%;
}

img {
  object-fit: cover;
  border-radius: 24px;
  flex: none;
}

strong {
  color: var(--text--light--primary);
  font-weight: 600;
}

em {
  font-style: italic;
}

blockquote {
  border-left: 2px none var(--text--light--secondary);
  text-indent: -.4em;
  cursor: default;
  margin-bottom: 0;
  padding: 0 48px;
  font-family: JetBrains Mono, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 150%;
}

figure {
  margin-bottom: 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 40%;
  max-width: 384px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
  grid-auto-columns: 1fr;
  place-items: center;
  display: flex;
}

.arrow-2 {
  margin-bottom: 1px;
  margin-left: 8px;
}

.home-body {
  background-color: var(--dark-grey);
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.footer-container-1 {
  grid-template: "."
  / auto auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  place-content: stretch space-between;
  place-items: flex-start center;
  width: 100%;
  display: flex;
}

.basic-button {
  border: 2px solid var(--border--light);
  box-shadow: none;
  color: var(--text--light--primary);
  letter-spacing: -.2px;
  cursor: pointer;
  background-color: #0000;
  border-radius: 59px;
  width: 100%;
  padding: 14px 32px;
  font-size: 18px;
  font-weight: 600;
  transition: all .2s ease-out;
}

.basic-button:hover {
  border-width: 6px;
  padding: 10px 28px;
}

.basic-button:active {
  background-color: var(--border--light);
}

.basic-button.delayed.translucent {
  border-color: var(--border--translucent);
}

.basic-button.delayed.translucent:active {
  background-color: var(--border--translucent);
  border-color: #0000;
}

.footer {
  z-index: 20;
  background-color: var(--dark-grey);
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: -256px;
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  position: relative;
  bottom: 0%;
}

.footer.dark {
  background-color: var(--dark);
}

.footer.transparent {
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  background-color: #ffffff80;
}

.footer-content-container {
  grid-column-gap: 0px;
  grid-row-gap: 4px;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  justify-items: end;
  display: grid;
}

.link-container {
  grid-column-gap: 1px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: auto auto auto auto;
  grid-auto-columns: auto;
  place-items: start;
  margin-top: 0;
  display: flex;
}

.copyright {
  color: var(--text--light--secondary);
  text-align: right;
  letter-spacing: -.1px;
  cursor: default;
  margin-bottom: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
}

.copyright.dark {
  color: var(--text--dark--secondary);
}

.copyright.translucent {
  color: var(--text--translucent--secondary);
}

.footer-icon-link {
  color: var(--text--light--secondary);
  background-color: #0000;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 6px;
  transition: all .2s;
  position: relative;
}

.footer-icon-link:hover {
  box-shadow: none;
  color: var(--text--translucent--paragraph);
  background-color: #0000000f;
}

.footer-icon-link:active {
  background-color: var(--border--translucent);
  color: var(--text--light--primary);
}

.footer-icon-link.w--current {
  display: none;
}

.footer-icon-link.dark {
  color: var(--text--dark--secondary);
}

.footer-icon-link.dark:hover {
  color: var(--text--dark--primary);
  background-color: #ffffff1f;
}

.footer-icon-link.hidden {
  display: none;
}

.footer-icon-link.translucent {
  color: var(--text--translucent--secondary);
}

.footer-icon-link.translucent:hover {
  color: var(--text--translucent--paragraph);
}

.footer-link-container {
  grid-column-gap: 48px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
  grid-auto-columns: auto;
  place-items: start center;
  display: grid;
}

.heading-1.dark-primary {
  color: var(--text--dark--primary);
}

.heading-1.dark-primary.on-your-face {
  font-size: 48px;
}

.heading-1.large-number {
  color: var(--text--bytedance--primary);
  font-family: JetBrains Mono, sans-serif;
  font-size: 80px;
  font-weight: 700;
}

.heading-1.on-your-face {
  font-size: 48px;
}

.heading-1.background-deco {
  z-index: 0;
  opacity: .04;
  color: var(--text--bytedance--primary);
  font-family: JetBrains Mono, sans-serif;
  font-size: 1080px;
  font-weight: 700;
  line-height: 100%;
  position: absolute;
  left: 0;
}

.heading-1.background-deco.bytedance-1 {
  margin-left: -147px;
  left: 50vw;
}

.heading-1.background-deco.bytedance-2 {
  margin-left: 1980px;
  left: 50vw;
}

.heading-1.light-translucent-primary {
  color: var(--text--translucent--primary);
}

.heading-1.rog-primary {
  color: #0000;
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(circle at 0 0, #b7257d, #d23421);
  -webkit-background-clip: text;
  background-clip: text;
}

.heading-1.encompass-primary {
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(circle at 0 0, #ffe4bc, #ffc46b);
  -webkit-background-clip: text;
  background-clip: text;
}

.heading-3 {
  transform-style: preserve-3d;
}

.heading-3:hover {
  transform: translate3d(0, 0, 30px);
}

.heading-3.ecrecycle-primary {
  color: var(--text--ecrecycle--primary);
}

.heading-3.dark-secondary {
  color: var(--text--dark--secondary);
}

.heading-3.dark-primary {
  color: var(--text--dark--primary);
}

.heading-3.ubi-primary {
  color: var(--text--ubi--primary);
}

.heading-3.bytedance-primary {
  color: var(--text--bytedance--primary);
}

.heading-3.centered {
  text-align: center;
}

.heading-3.rog-primary {
  color: #0000;
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(circle at 0 0, #b7257d, #d23421);
  -webkit-background-clip: text;
  background-clip: text;
}

.heading-3.encompass-primary {
  color: #0000;
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(circle at 0 0, #ffe4bc, #ffc46b);
  -webkit-background-clip: text;
  background-clip: text;
}

.heading-3.light-translucent-primary {
  color: var(--text--translucent--primary);
}

.main-section {
  z-index: 0;
  background-color: var(--white);
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: -256px;
  padding-top: 128px;
  padding-bottom: 384px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.main-section.ecrecycle-primary {
  background-image: radial-gradient(circle at 0 0, #63b493, #4aa47e);
}

.main-section.start {
  background-color: var(--white);
  height: 100vh;
  min-height: 960px;
  margin-top: 0;
  margin-bottom: 256px;
  padding: 80px 16px 16px;
}

.main-section.start.extra {
  min-height: 640px;
}

.main-section.start.dark {
  background-color: var(--dark);
}

.main-section.light-grey {
  background-color: var(--light-grey);
}

.main-section.gemini {
  background-image: radial-gradient(circle at 0 0, #2196f3, #1976d2);
  margin-top: -160px;
  padding-top: 80px;
  padding-bottom: 96px;
}

.main-section.galet {
  background-image: radial-gradient(circle at 0 0, #ededed, #dcdcdc);
  margin-top: 0;
  padding-top: 80px;
  padding-bottom: 160px;
}

.main-section.ecrecycle-secondary {
  background-color: var(--background--ecrecycle--secondary);
}

.main-section.slider-section {
  padding-top: 72px;
  padding-bottom: 328px;
}

.main-section.icon-packs {
  background-color: var(--white);
  padding-bottom: 0;
}

.main-section.end {
  padding-top: 72px;
  padding-bottom: 328px;
}

.main-section.end.ubi-primary {
  background-image: radial-gradient(circle at 0 0, #6eb9fa, #3999f8 50%);
}

.main-section.ubi-secondary {
  background-color: var(--background--ubi--secondary);
}

.main-section.ubi-primary {
  background-image: radial-gradient(circle at 0 0, #6eb9fa, #3999f8 50%);
}

.main-section.ubi-primary.long {
  background-image: radial-gradient(circle at 0 0, #6eb9fa, #3999f8 16%);
  padding-bottom: 0;
}

.main-section.bytedance-secondary {
  background-image: linear-gradient(#edf1ff, #e0e9ff);
}

.main-section.bytedance-secondary.horizontal-scroll {
  padding-top: 0;
  padding-bottom: 256px;
  display: block;
  overflow: visible;
}

.main-section.gradient {
  background-image: linear-gradient(#fff, #eceef0);
}

.main-section.dark-darker-black {
  background-color: var(--dark);
}

.main-section.rog-primary {
  background-image: url('../images/ROG-Primary.svg');
  background-position: 0 100%;
  background-size: cover;
}

.main-section.rog-primary.overflow-video {
  padding-top: 0;
  padding-bottom: 256px;
}

.main-section.dark-light-black {
  background-color: var(--dark-light);
}

.main-section.dark-light-black.hidden {
  display: none;
}

.main-section.poparazzi {
  background-color: #2d2dc6;
}

.main-section.encompass-primary {
  background-image: url('../images/Encompass-Background.svg');
  background-position: 0 100%;
  background-size: cover;
}

.project-details-rich-text {
  width: 85vw;
  max-width: 960px;
  display: block;
  position: static;
}

.project-details-rich-text img {
  border-radius: 10px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.project-details-rich-text a {
  font-weight: 500;
  text-decoration: underline;
}

.project-details-rich-text a:hover {
  text-decoration: underline;
}

.project-details-rich-text h4 {
  margin-bottom: 32px;
}

.project-details-rich-text h1 {
  padding-top: 128px;
}

.project-details-rich-text h3 {
  margin-top: 80px;
}

.project-details-rich-text h5 {
  margin-top: 32px;
  margin-bottom: 16px;
}

.project-details-rich-text h6 {
  margin-top: 16px;
  margin-bottom: 8px;
}

.home-hero-background {
  opacity: 0;
  filter: blur(20px);
  background-image: url('../images/Neumorphic-Specos-Angle-1.jpg');
  background-position: 50% 15%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.main-content-container {
  z-index: 10;
  flex-direction: column;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  place-items: flex-start start;
  width: 85%;
  display: flex;
}

.main-content-container.small {
  width: auto;
  max-width: none;
  margin-left: 80px;
  margin-right: 80px;
}

.main-content-container._960w {
  max-width: 960px;
}

.main-content-container._960w.centered {
  align-items: center;
}

.main-content-container._960w.hidden {
  display: none;
}

.main-content-container._1080w {
  width: 90%;
  max-width: 1080px;
}

.main-content-container._1080w.centered {
  align-items: center;
}

.main-content-container._1080w.home {
  align-items: center;
  width: 85%;
}

.main-content-container._1920w {
  width: 95%;
  max-width: 1920px;
}

.main-content-container._1920w.overflow {
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 2560px;
  min-height: 640px;
  overflow: visible;
}

.main-content-container._1440w {
  width: 90%;
  max-width: 1440px;
}

.main-content-container._1440w.hidden {
  display: none;
}

.main-content-container._1280w {
  width: 90%;
  max-width: 1280px;
}

.main-content-container._1280w.prototype {
  align-items: center;
}

.main-content-container.flex {
  width: 100%;
}

.main-content-container._1600w {
  width: 95%;
  max-width: 1600px;
}

.main-content-container._1600w.desktop-hide {
  display: none;
}

.main-content-container._1600w.centered {
  align-items: center;
}

.main-content-container._1600w.overflow {
  width: 100%;
}

.page-transition-overlay-in {
  z-index: 9999;
  background-color: #f5f5f5;
  border-bottom-right-radius: 18px;
  border-bottom-left-radius: 18px;
  width: 100%;
  height: 110vh;
  margin-top: 0;
  display: none;
  position: fixed;
}

.page-transition-overlay-in.home-overlay {
  background-color: var(--white);
}

.page-transition-overlay-in.dark {
  background-color: var(--black);
}

.page-transition-overlay-out {
  z-index: 9999;
  background-color: #f5f5f5;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  width: 100%;
  height: 110vh;
  display: block;
  position: fixed;
  top: 100%;
}

.page-transition-overlay-out.dark {
  background-color: var(--black);
}

.text-field {
  color: #323232;
  text-align: left;
  background-color: #0000000a;
  border: 1px #000;
  border-radius: 100px;
  margin-bottom: 0;
  padding: 32px 24px;
  font-size: 18px;
  line-height: 150%;
}

.text-field::placeholder {
  color: #32323280;
}

.footer-link-heading-6 {
  cursor: default;
  transform-style: preserve-3d;
  margin-right: 8px;
}

.footer-link-heading-6:hover {
  transform: translate3d(0, 0, 30px);
}

.footer-link-heading-6.dark-secondary {
  color: var(--text--dark--secondary);
}

.footer-link-heading-6.light-translucent-secondary {
  color: var(--text--translucent--secondary);
}

.footer-link {
  opacity: 1;
  color: var(--text--light--primary);
  cursor: pointer;
  background-color: #0000;
  border-radius: 14px;
  padding: 6px 10px;
  font-family: Barlow, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  transition: all .2s;
}

.footer-link:hover {
  color: var(--text--light--paragraph);
  background-color: #0000000f;
}

.footer-link:active {
  background-color: var(--border--translucent);
  color: var(--text--light--primary);
}

.footer-link.delayed.dark {
  color: var(--text--dark--primary);
}

.footer-link.delayed.dark:hover {
  background-color: #ffffff1f;
}

.footer-link.dark {
  color: var(--text--dark--primary);
}

.footer-link.dark:hover {
  background-color: #ffffff1f;
}

.footer-link.translucent {
  color: var(--text--translucent--primary);
}

.nav-menu-link-class-container {
  grid-column-gap: 0px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  place-content: start;
  place-items: start end;
  display: grid;
}

.nav-menu-link-container-small {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.hero-image-container {
  justify-content: center;
  align-items: center;
  width: 120vw;
  height: 120vh;
  margin-left: -10vw;
  display: block;
  position: fixed;
  inset: 0%;
  overflow: hidden;
}

.footer-container-2 {
  grid-template: "."
  / auto auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  place-content: stretch space-between;
  place-items: center;
  width: 100%;
  display: flex;
}

.footer-home-button {
  color: var(--text--light--primary);
  cursor: pointer;
  background-color: #0000;
  border-radius: 26px;
  align-items: center;
  margin-left: -8px;
  padding: 8px 14px 8px 8px;
  transition: background-color .2s;
  display: flex;
}

.footer-home-button:hover {
  color: var(--text--light--paragraph);
  background-color: #0000000f;
}

.footer-home-button:active {
  background-color: var(--border--translucent);
  color: var(--text--light--primary);
}

.footer-home-button.w--current {
  z-index: 115;
}

.footer-home-button.w--current:hover {
  background-color: #0000000f;
}

.footer-home-button.dark {
  color: var(--text--dark--primary);
}

.footer-home-button.dark:hover {
  background-color: #ffffff1f;
}

.footer-home-button.translucent {
  color: var(--text--translucent--primary);
}

.work-project-container {
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  place-content: center flex-start;
  place-items: center;
  margin-bottom: 48px;
  display: block;
}

.image-sharp-corner {
  border-radius: 0;
}

.image-sharp-corner.card-vertical-fill {
  object-position: 50% 0%;
  flex: 1;
  width: 100%;
  height: 100%;
}

.image-sharp-corner.card-vertical-fill.cotain {
  object-fit: contain;
  object-position: 50% 50%;
}

.image-sharp-corner.card-vertical-fill.left-start {
  object-position: 0% 0%;
}

.image-sharp-corner.card-horizontal-fill {
  width: 100%;
  height: 100%;
}

.image-sharp-corner.card-horizontal-fill.top-left-start {
  object-position: 0% 0%;
}

.image-sharp-corner.card-horizontal-fill.top-left-start._640px-min-height {
  min-height: 640px;
}

.image-sharp-corner.card-horizontal-fill.top-left-start._640px-max-height {
  max-height: 640px;
}

.image-sharp-corner.card-horizontal-fill.top-left-start._72w {
  border-radius: 16px;
  width: 72px;
  box-shadow: 0 8px 16px #00000029;
}

.image-sharp-corner.card-horizontal-fill.center-start._640px-min-height {
  min-height: 640px;
}

.image-sharp-corner.card-horizontal-fill.center-start._480px-max-height {
  max-height: 480px;
}

.image-sharp-corner.card-horizontal-fill.center-contain {
  object-fit: contain;
}

.image-sharp-corner.card-horizontal-fill.center-contain._720px-max-height {
  max-height: 720px;
}

.image-sharp-corner.card-horizontal-fill.center-contain._720px-max-height.padding {
  padding: 32px;
}

.project-hero-container {
  z-index: 1;
  border: 1px solid var(--border--dark);
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  background-color: #fffc;
  border-radius: 24px;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  place-items: flex-start stretch;
  width: 85%;
  max-width: 1080px;
  margin-top: -40px;
  padding: 88px 120px 88px 128px;
  display: flex;
  position: relative;
  overflow: visible;
}

.project-hero-container.about {
  background-image: url('../images/Untitled.jpg');
  background-position: 50% 100%;
  background-size: cover;
}

.project-hero-container.dark {
  background-color: #0a0a0a80;
  border-color: #ffffff1a;
}

.main-split-content {
  z-index: 10;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 164px auto;
  grid-auto-columns: auto;
  place-items: start;
  width: 100%;
  display: block;
}

.main-split-content.prototype {
  grid-column-gap: 6vw;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
  grid-auto-columns: auto;
  place-items: center;
  display: grid;
}

.main-split-content.prototype.ubi {
  grid-column-gap: 32px;
  grid-template-columns: 1fr 3fr;
}

.main-split-content.prototype.ubi.reverse {
  grid-template-columns: 3fr 1fr;
}

.main-split-content._6-2 {
  grid-column-gap: 48px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 6fr 2fr;
  grid-auto-columns: auto;
  place-items: center;
  display: grid;
}

.main-split-content._2-6 {
  grid-column-gap: 32px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 2fr 6fr;
  grid-auto-columns: auto;
  place-items: center;
  display: grid;
}

.main-split-content._2-3 {
  grid-column-gap: 64px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 2fr 3fr;
  grid-auto-columns: auto;
  place-items: center;
  display: grid;
}

.main-split-content._2-3._24px {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.main-split-content._2-3._24px.vertically-filled {
  align-items: stretch;
}

.main-split-content._2-5 {
  grid-column-gap: 4vh;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 2fr 5fr;
  grid-auto-columns: auto;
  place-items: center;
  display: grid;
}

.main-split-content.default {
  grid-column-gap: 64px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 164px auto;
  grid-auto-columns: auto;
  display: grid;
}

.main-split-content._1-1-1 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: auto;
  align-items: stretch;
  height: auto;
  display: grid;
}

.main-split-content._1-1-1._24px-padding {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.main-split-content._1-1 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  display: grid;
}

.main-split-content._1-1._24px {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  align-items: start;
}

.main-split-content._1-1._24px.vertical-filled {
  align-items: stretch;
}

.main-split-content._1-1._64px {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  justify-items: center;
}

.main-split-content._1-1.thank-you, .main-split-content._1-1.thank-you-large {
  justify-items: center;
}

.main-split-content._1-1._48px {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  align-items: start;
}

.paragraph-link {
  text-decoration: underline;
}

.paragraph-link:hover {
  background-color: var(--text--light--paragraph);
  color: var(--white);
}

.paragraph-link.bold {
  font-weight: 500;
}

.paragraph-link.dark-paragraph {
  color: var(--dark--paragraph);
}

.paragraph-link.dark-primary {
  color: var(--text--dark--primary);
}

.custom-button {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border: 2px solid var(--border--light);
  cursor: pointer;
  border-radius: 59px;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  justify-content: center;
  place-items: center;
  padding: 14px 32px;
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
  display: grid;
}

.custom-button:hover {
  border-width: 6px;
  padding: 10px 28px;
}

.custom-button:active {
  background-color: var(--border--light);
}

.custom-button.dark {
  border-color: var(--border--dark);
}

.custom-button.dark:active {
  background-color: var(--border--dark);
  border-color: #0000;
}

.custom-button.dark.right-animation.full-width.delayed.hidden {
  display: none;
}

.custom-button.dark.full-width {
  width: 100%;
}

.custom-button.dark.full-width.disabled {
  cursor: default;
}

.custom-button.dark.full-width.disabled:hover {
  border-width: 2px;
  padding: 14px 32px;
}

.custom-button.dark.full-width.disabled.hidden {
  display: none;
}

.custom-button.right-animation {
  grid-template-columns: auto auto;
}

.custom-button.right-animation.full-width {
  width: 100%;
}

.custom-button.right-animation.delayed.translucent.hidden {
  display: none;
}

.custom-button.left-animation, .custom-button.right-icon, .custom-button.left-icon {
  grid-template-columns: auto auto;
}

.custom-button.translucent {
  border-color: var(--border--translucent);
}

.custom-button.translucent:active {
  background-color: var(--border--translucent);
  border-color: #0000;
}

.custom-button-text {
  color: var(--text--light--primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
}

.custom-button-text.dark {
  color: #fff;
}

.custom-button-text.disabled {
  color: #fff6;
}

.custom-button-text.light-translucent-primary {
  color: var(--text--translucent--primary);
}

.custom-button-icon {
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
}

.custom-button-icon.dark-primary {
  color: var(--white);
}

.custom-button-icon.light-primary {
  color: var(--text--light--primary);
}

.custom-button-icon.video-control {
  width: 24px;
  height: 24px;
}

.custom-button-icon.video-control.play {
  display: none;
}

.custom-button-icon.video-control.play.reverse {
  display: flex;
}

.custom-button-icon.video-control.pause.reverse {
  display: none;
}

.custom-button-icon.light-secondary {
  color: var(--text--light--secondary);
}

.custom-button-icon.small {
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.custom-button-icon.light-translucent-paragraph {
  color: var(--text--translucent--paragraph);
}

.smooth-scroll-wrapper {
  z-index: 1;
  flex-direction: column;
  align-items: center;
}

.link {
  color: #323232;
  text-decoration: underline;
}

.link:hover {
  background-color: var(--text--light--primary);
  color: var(--white);
}

.expandable-button {
  z-index: 10;
  border: 0px solid var(--border--light);
  box-shadow: inset 0 0 0 2px var(--border--light);
  background-color: #e9eaef00;
  border-radius: 32px;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  place-content: space-around flex-start;
  place-items: flex-start start;
  width: 100%;
  transition: box-shadow .2s;
  display: block;
  overflow: hidden;
}

.expandable-button:hover {
  box-shadow: inset 0 0 0 6px var(--border--light);
}

.expandable-slider-image {
  opacity: 1;
  background-image: url('../images/clyde-he-z4nc3eayisA-unsplash.jpg');
  background-position: 0 0;
  background-size: cover;
  border-radius: 16px;
  flex: none;
  width: 360px;
  height: 240px;
}

.expandable-button-lottie-animation {
  width: 12px;
  height: 22px;
  margin-right: 10px;
}

.spacing-medium---48 {
  flex: none;
  width: 100%;
  height: 48px;
}

.spacing-large---64 {
  flex: none;
  width: 100%;
  height: 64px;
}

.spacing-large---64.home-mini-hero-top-inner {
  height: 32px;
}

.main-split-content-container {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  justify-self: stretch;
  min-width: 0;
  display: flex;
}

.main-split-content-container.vertical-centered {
  justify-content: center;
}

.main-split-content-container.vertical-distribute {
  justify-content: space-between;
  height: 100%;
}

.project-body {
  flex-direction: column;
  align-items: center;
}

.project-body.dark {
  background-color: var(--dark);
}

.spacing-xsmall---16 {
  flex: none;
  width: 100%;
  height: 16px;
}

.project-switch-buttons-container {
  grid-column-gap: 24px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  display: flex;
}

.heading-6.image-description {
  text-align: center;
  width: 100%;
}

.heading-6.dark-secondary {
  color: var(--text--dark--secondary);
}

.heading-6.light-translucent-secondary {
  color: var(--text--translucent--secondary);
}

.heading-6.light-translucent-secondary.cursor-click {
  cursor: pointer;
}

.heading-6.light-translucent-primary {
  color: var(--text--translucent--primary);
  font-weight: 700;
}

.heading-6.light-translucent-primary.cursor-click {
  cursor: pointer;
}

.heading-6.larger {
  color: var(--text--translucent--primary);
  font-size: 16px;
  font-weight: 700;
}

.heading-6.larger.dark-primary {
  color: var(--text--dark--primary);
}

.project-paragraph {
  color: #fff;
}

.project-video {
  object-fit: contain;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  max-width: 400px;
  display: flex;
  overflow: hidden;
}

.project-video.ubi {
  max-width: none;
}

.project-video.bytedance {
  z-index: 5;
  flex: none;
  width: 1200px;
  max-width: none;
  display: block;
  position: relative;
}

.project-video.bytedance._01 {
  margin-left: -600px;
}

.project-spacing-prototype {
  width: 100%;
  height: 0;
}

.slider-infinite {
  background-color: #0000;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.slider-infinite.aspect-ratio {
  background-color: #0000;
  position: absolute;
  inset: 0%;
}

.slide-nav {
  display: none;
}

.slider-right-arrow {
  z-index: 10;
  border: 2px solid var(--border--translucent);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  background-color: #fffc;
  border-radius: 28px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-right: 56px;
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
  display: flex;
  overflow: visible;
}

.slider-right-arrow:hover {
  border-width: 6px;
}

.slider-right-arrow:active {
  background-color: #ebebebcc;
  border-color: #0000;
}

.slider-right-arrow.small {
  margin-right: 20px;
}

.slider-left-arrow {
  z-index: 10;
  border: 2px solid var(--border--translucent);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  background-color: #fffc;
  border-radius: 32px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  margin-left: 56px;
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
  display: flex;
  overflow: visible;
}

.slider-left-arrow:hover {
  border-width: 6px;
}

.slider-left-arrow:active {
  background-color: #ebebebcc;
  border-color: #0000;
}

.slider-left-arrow.small {
  margin-left: 20px;
}

.aspect-ratio-container {
  border-radius: 24px;
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}

.aspect-ratio-container._2-3 {
  padding-top: 150%;
}

.aspect-ratio-container._16-9 {
  padding-top: 56.25%;
}

.aspect-ratio-content {
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.project-hero-background {
  background-color: #f0f0f0;
  border-radius: 32px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.project-hero-background.ecrecycle {
  background-image: radial-gradient(circle at 0 0, #77d9b1, #58c496);
}

.project-hero-background.about {
  background-color: #fff;
}

.project-hero-background.ubi {
  background-image: radial-gradient(circle at 0 0, #6eb9fa, #3999f8 50%);
}

.project-hero-background.bytedance-2021 {
  background-color: #fcfcfc;
}

.project-hero-background.rog {
  background-image: url('../images/ROG-Primary.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.project-hero-background.encompass {
  background-image: url('../images/Encompass-Background.svg');
  background-position: 50%;
  background-size: cover;
}

.spacing-small---24 {
  flex: none;
  width: 100%;
  height: 24px;
}

.spacing-small---24.specialized {
  height: 32px;
}

.spacing-xlarge---96 {
  width: 100%;
  height: 96px;
}

.project-split-content-1-1-1-1 {
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.divider {
  background-color: var(--border--light);
  width: 100%;
  height: 2px;
}

.divider.translucent {
  background-color: var(--border--translucent);
}

.divider.translucent.relative {
  position: relative;
}

.divider.translucent.thin {
  height: 1px;
}

.divider.dark {
  background-color: var(--border--dark);
}

.divider.ghost-indicator {
  height: 2px;
  margin-left: 8px;
}

.heading-5.ecrecycle-secondary {
  color: var(--text--ecrecycle--secondary);
}

.heading-5.dark-secondary {
  color: var(--text--dark--secondary);
}

.heading-5.light-secondary {
  color: var(--text--light--secondary);
}

.heading-5.ubi-secondary {
  color: var(--text--ubi--secondary);
}

.quote.ecrecycle-primary {
  color: var(--text--ecrecycle--primary);
  border-left-color: #57b68f66;
}

.card {
  background-color: var(--white);
  cursor: default;
  border-radius: 24px;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.card._24px-padding {
  padding: 24px;
}

.card._24px-padding.rog-deco {
  background-color: #0000;
  padding-left: 32px;
  padding-right: 32px;
}

.card._48px-padding {
  padding: 48px;
}

.card._48px-padding.ubi-secondary {
  background-color: var(--background--ubi--secondary);
}

.card._48px-padding.light-gray {
  background-color: #f5f5f5;
}

.card._48px-padding.white-w-border {
  border: 1px solid var(--border--translucent);
}

.card._48px-padding.white-w-border.shadow {
  box-shadow: 0 132px 53px #cfcfcf03, 0 74px 44px #cfcfcf0d, 0 33px 33px #cfcfcf17, 0 8px 18px #cfcfcf1a;
}

.card._48px-padding.lighter-black {
  background-color: var(--lighter-black);
}

.card.white-w-border {
  border: 1px solid var(--border--translucent);
}

.card.white-w-border.shadow {
  box-shadow: 0 132px 53px #cfcfcf03, 0 74px 44px #cfcfcf0d, 0 33px 33px #cfcfcf17, 0 8px 18px #cfcfcf1a;
}

.card.white-w-border.shadow.mobile-show {
  display: none;
}

.card.ubi-hero {
  background-image: url('../images/UBI-Background.png');
  background-position: 0 0;
  background-size: cover;
}

.card.project-janus-hero {
  background-image: url('../images/ROG-Background.png');
  background-position: 0 0;
  background-size: cover;
}

.card.ecrecycle-hero {
  background-image: url('../images/ECRecycle-Background.webp');
  background-position: 0 0;
  background-size: cover;
}

.card.encompass-hero {
  background-image: url('../images/Encompass-Bsckground.webp');
  background-position: 50%;
  background-size: cover;
}

.card.lighter-black {
  background-color: var(--lighter-black);
}

.card.lighter-black.vertical-centered {
  background-color: var(--lighter-black);
  justify-content: center;
}

.card.dark-lighter-black {
  background-color: var(--lighter-black);
}

.card.dark-lighter-black.center-justified {
  justify-content: space-between;
}

.card.transparent {
  background-color: #0000;
}

.card.extra-hero {
  background-image: url('../images/Extra-Background.webp');
  background-position: 50%;
  background-size: cover;
}

.card.translucent {
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  background-color: #ffffff80;
}

.card.translucent.shadow {
  box-shadow: 0 132px 53px #cfcfcf03, 0 74px 44px #cfcfcf0d, 0 33px 33px #cfcfcf17, 0 8px 18px #cfcfcf1a;
}

.card.translucent.shadow.mobile-show {
  display: none;
}

.image._960h {
  max-height: 960px;
}

.image._480h {
  max-height: 480px;
}

.image._480h.no-round {
  border-radius: 0;
  width: auto;
}

.image.slider-image {
  border-radius: 0;
}

.heading-4.card-title {
  color: var(--text--light--primary);
  font-family: JetBrains Mono, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.heading-4.card-title.ecrecycle-primary {
  color: var(--text--ecrecycle--primary);
}

.heading-4.card-title.ecrecycle-secondary {
  color: var(--text--ecrecycle--secondary);
}

.heading-4.card-title.ubi-primary {
  color: var(--text--ubi--primary);
}

.heading-4.ecrecycle-secondary {
  color: var(--text--ecrecycle--secondary);
}

.heading-4.dark-secondary {
  color: var(--text--dark--secondary);
}

.heading-4.extra-title {
  color: var(--text--light--primary);
  font-size: 22px;
  font-weight: 600;
}

.heading-4.centered {
  text-align: center;
}

.heading-4.card-title-long {
  color: var(--text--light--primary);
  font-size: 24px;
  font-weight: 600;
  line-height: 125%;
}

.heading-4.card-title-long.dark-primary {
  color: var(--text--dark--primary);
}

.heading-4.card-title-long.dark-paragraph {
  font-weight: 500;
}

.heading-4.dark-paragraph {
  color: var(--dark--paragraph);
}

.heading-4.dark-primary {
  color: var(--text--dark--primary);
}

.heading-4.light-translucent-secondary {
  color: var(--text--translucent--secondary);
}

.card-icon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.card-icon.large {
  width: 48px;
  height: 48px;
}

.card-icon.large.photography {
  color: #757575;
}

.card-icon.large.cat {
  color: #bd7400;
}

.card-icon.large.tech {
  color: #00a2ff;
}

.card-icon.large.game {
  color: #00b812;
}

.card-icon.xlarge {
  width: 72px;
  height: 72px;
}

.card-icon.xxlarge {
  width: 108px;
  height: 108px;
}

.card-icon.xxlarge.encompass {
  margin-left: -8px;
}

.card-icon.medium {
  width: 32px;
  height: 32px;
}

.project-hero-background-image {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  transition-property: none;
  position: absolute;
  overflow: visible;
}

.project-hero-background-image.ecrecycle {
  height: 110%;
}

.project-hero-background-image.extra {
  opacity: .8;
  height: 110%;
}

.project-hero-background-image.about {
  max-width: none;
  height: 110%;
}

.project-hero-background-image.ubi {
  opacity: .7;
  object-fit: cover;
  max-width: 1920px;
  height: 110%;
}

.project-hero-background-image.bytedance-2021 {
  object-fit: cover;
  max-width: none;
  height: 110%;
}

.project-hero-background-image.rog {
  opacity: .7;
  object-fit: cover;
  max-width: 2560px;
  height: 110%;
  overflow: visible;
}

.mask {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mask._1280w {
  max-width: 1280px;
}

.mask._1080w {
  max-width: 1080px;
}

.mask._640w {
  max-width: 640px;
}

.slider-arrow-icon {
  z-index: 5;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide._48px-margin {
  margin-right: 48px;
}

.paragraph.dark-secondary {
  color: var(--text--dark--secondary);
}

.paragraph.light-translucent-paragraph {
  color: var(--text--translucent--paragraph);
}

.paragraph.dark-paragraph {
  color: var(--dark--paragraph);
}

.home-logo {
  z-index: 2;
  object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
}

.home-hero-content-container-2 {
  grid-column-gap: 24px;
  grid-row-gap: 16px;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
  grid-auto-columns: auto;
  justify-content: start;
  place-items: center end;
  display: flex;
  position: relative;
}

.spacing-xxsmall---8 {
  flex: none;
  width: 100%;
  height: 8px;
}

.home-hero-content-container-1 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
  grid-auto-columns: auto;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.home-project {
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-content: stretch center;
  align-items: center;
  margin-bottom: 256px;
  padding-top: 30vh;
  padding-bottom: 128px;
  display: flex;
  position: relative;
  overflow: visible;
}

.home-project-hero-container {
  z-index: 1;
  background-color: var(--white);
  border-radius: 24px;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center stretch;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.home-project-hero-text-container {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 50%;
  padding: 64px;
  display: flex;
  overflow: hidden;
}

.home-project-grid {
  flex-direction: column;
  grid-template-rows: auto 480px 480px 480px;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 480px;
  grid-auto-columns: 1fr;
  width: 100%;
  display: flex;
}

.image-div {
  width: 100%;
  height: 100%;
}

.image-div.bytedance {
  background-image: url('../images/ByteDance-Image.svg');
  background-position: 50%;
  background-size: cover;
  min-height: 440px;
}

.nav-bar-space {
  z-index: 999;
  opacity: 1;
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  display: flex;
  position: fixed;
  top: 0%;
  bottom: auto;
}

.nav-bar-space.dark {
  background-color: #0a0a0a80;
}

.nav-link-block {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--text--translucent--secondary);
  background-color: #0000;
  border: 2px solid #0000;
  border-radius: 40px;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 100%;
  transition: all .2s;
  display: flex;
}

.nav-link-block:hover {
  color: var(--text--translucent--paragraph);
  background-color: #0000000f;
}

.nav-link-block:active {
  background-color: var(--border--translucent);
  color: var(--text--translucent--primary);
  border-color: #0000;
}

.nav-link-block.w--current {
  color: var(--text--light--primary);
  background-color: #0000000f;
}

.nav-link-block.w--current:hover {
  border-color: var(--border--translucent);
}

.nav-link-block.w--current:active {
  background-color: var(--border--translucent);
  border-color: #0000;
}

.nav-link-block.dark {
  color: var(--text--dark--secondary);
}

.nav-link-block.dark:hover {
  color: var(--dark--paragraph);
  background-color: #ffffff1f;
}

.nav-link-block.dark:active {
  background-color: var(--border--dark);
  color: var(--text--dark--primary);
}

.nav-bar-logo {
  width: 40px;
  height: 40px;
}

.nav-bar-content-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.ghost-button {
  color: var(--text--light--primary);
  background-color: #0000;
  padding: 0;
  transition: all .2s;
}

.ghost-button.large {
  border-radius: 29px;
  margin-left: -12px;
  padding: 8px 12px;
  font-size: 28px;
  font-weight: 600;
}

.ghost-button.large:hover {
  color: var(--text--light--paragraph);
  background-color: #0000000f;
}

.ghost-button.large:active {
  background-color: var(--border--translucent);
  color: var(--text--light--primary);
}

.ghost-button.large.dark {
  color: var(--text--dark--primary);
}

.ghost-button.large.dark:hover {
  background-color: #ffffff1f;
}

.ghost-button.large.translucent {
  color: var(--text--translucent--primary);
}

.footer-logo {
  justify-content: center;
  align-items: center;
  width: 117px;
  height: 36px;
  display: flex;
}

.footer-icon {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}

.home-hero-heading-container {
  position: relative;
}

.heading-2.dark-secondary {
  color: var(--text--dark--secondary);
}

.heading-2.dark-primary {
  color: var(--text--dark--primary);
}

.heading-2.light-translucent-secondary {
  color: var(--text--translucent--secondary);
}

.expandable-button-title-container {
  cursor: pointer;
  align-items: center;
  width: 100%;
  height: 64px;
  padding-left: 24px;
  display: flex;
}

.expandable-button-title-container.ghost {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  height: 48px;
  padding-left: 0;
}

.expandable-content-title-container {
  align-items: center;
  display: flex;
}

.expandable-content-text-container {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 48px;
  display: flex;
}

.expandable-content {
  z-index: 10;
  cursor: pointer;
  background-color: #efefef00;
  border-radius: 32px;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  place-content: space-around space-between;
  place-items: flex-start start;
  width: 100%;
  transition: box-shadow .2s;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #e8e8e8;
}

.expandable-content:hover {
  box-shadow: inset 0 0 0 6px #e8e8e8;
}

.expandable-slider {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  width: 100%;
  padding-bottom: 24px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  overflow: scroll;
}

.expandable-slider.content-slider {
  padding-bottom: 0;
  padding-left: 32px;
  padding-right: 32px;
}

.split-column-content-container {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  display: flex;
}

.nav-link-block-container {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  grid-template-rows: auto;
  grid-template-columns: auto auto auto auto;
  grid-auto-columns: 1fr;
  display: flex;
}

.nav-home-button {
  color: var(--text--light--primary);
  border: 2px solid #0000;
  border-radius: 32px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  font-size: 18px;
  font-weight: 600;
  line-height: 100%;
  transition: all .2s;
  display: flex;
}

.nav-home-button:hover {
  background-color: #0000000f;
}

.nav-home-button:active {
  background-color: var(--border--translucent);
}

.nav-home-button.w--current {
  color: var(--text--light--primary);
}

.nav-home-button.delayed.dark {
  color: var(--text--dark--primary);
}

.nav-home-button.delayed.dark:hover {
  background-color: #ffffff1f;
}

.nav-home-button.delayed.dark:active {
  background-color: var(--border--dark);
}

.card-hover-container {
  z-index: 1;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  background-color: #0000;
  border-radius: 12px;
  flex-direction: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: flex-start stretch;
  width: 100%;
  position: relative;
}

.card-hover-container.hidden {
  display: none;
}

.password-button-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  width: 100%;
  display: flex;
}

.error-message {
  border-radius: 80px;
  margin-top: 48px;
  padding-bottom: 7px;
  padding-left: 0;
  padding-right: 0;
}

.paragraph-small {
  color: var(--text--light--secondary);
  font-size: 14px;
  line-height: 130%;
}

.paragraph-small.dark-secondary {
  color: var(--text--dark--secondary);
}

.custom-button-icon-animation {
  width: 20px;
  height: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.error-message-text {
  color: var(--text--light--primary);
  font-family: JetBrains Mono, sans-serif;
  font-size: 14px;
}

.custom-button-2 {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border: 2px solid #e9eaef;
  border-radius: 59px;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  justify-content: center;
  place-items: center;
  padding: 14px 32px;
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
  display: grid;
}

.custom-button-2:hover {
  border-width: 6px;
  padding: 10px 28px;
}

.custom-button-2:active {
  background-color: #e9eaef;
}

.heading-6-link {
  color: var(--text--light--secondary);
  text-decoration: underline;
}

.heading-6-link.dark-secondary {
  color: var(--text--dark--secondary);
}

.archive-project-hero {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 2px solid var(--border--light);
  border-radius: 60px;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  justify-content: space-between;
  place-items: center;
  width: 100%;
  padding: 14px 32px;
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
  display: flex;
}

.archive-project-hero:hover {
  border-width: 6px;
  padding: 10px 28px;
}

.archive-project-hero:active {
  background-color: var(--border--light);
}

.archive-project-hero.dark {
  border-color: var(--border--dark);
}

.archive-project-hero.translucent {
  border-color: var(--border--translucent);
}

.about-body {
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.nav-bar-background-controller {
  width: 64px;
  height: 64px;
  position: absolute;
}

.home-logo-container {
  z-index: 0;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 132px;
  height: 132px;
  margin-left: -16px;
  display: flex;
  position: relative;
}

.home-logo-video {
  z-index: 5;
  width: 100%;
  height: 100%;
  position: absolute;
}

.slider-faded-overlay-left {
  z-index: 5;
  background-image: linear-gradient(to right, #f7f7f7, #f7f7f700);
  width: 5vw;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.slider-faded-overlay-right {
  z-index: 5;
  background-image: linear-gradient(to right, #f7f7f700, #f7f7f7);
  width: 5vw;
  position: absolute;
  top: 0%;
  bottom: 0%;
  right: 0;
}

.swipe-indication {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: none;
}

.spacing-small-medium---32 {
  width: 100%;
  height: 32px;
}

.expandable-button-container {
  align-items: center;
  width: 100%;
  padding-bottom: 24px;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}

.expandable-button-container.ghost {
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.horizontal-scroll-camera {
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100vh;
  margin-bottom: -100vh;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.horizontal-scroll-track {
  flex: none;
  height: 100%;
}

.horizontal-scroll-content {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  margin-right: -100vw;
  display: flex;
}

.horizontal-content-container {
  z-index: 10;
  flex-direction: row;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  justify-content: space-between;
  place-items: center start;
  width: 100%;
  display: flex;
}

.horizontal-content-container._24px-gap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.horizontal-content-container._24px-gap.poparazzi-adjusted {
  padding-left: 24px;
  padding-right: 24px;
}

.horizontal-content-container.card-content-container {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: fill;
  flex: 0 auto;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
  grid-auto-columns: auto;
  align-content: start;
  display: grid;
}

.horizontal-content-container.card-content-container._1-1 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  align-content: start;
}

.horizontal-content-container.card-content-container._2-3 {
  grid-template-columns: 2fr 3fr;
}

.horizontal-content-container.left-justified {
  justify-content: flex-start;
}

.horizontal-content-container.left-justified._16px-gap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.horizontal-content-container.flex {
  width: auto;
}

.horizontal-content-container.flex._8px-gap {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}

.horizontal-content-container.flex._8px-gap.hidden {
  display: none;
}

.horizontal-content-container.flex._8px-gap-copy {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.horizontal-content-container.flex._8px-gap-copy.hidden, .horizontal-content-container.flex.hidden {
  display: none;
}

.horizontal-scroll-height {
  width: 100%;
  height: 200vw;
}

.horizontal-scroll-wrapper {
  width: 100%;
  padding-bottom: 100vh;
}

.horizontal-spacing {
  flex: none;
  height: 100%;
}

.horizontal-spacing.start {
  width: 50vw;
}

.horizontal-spacing._25vw {
  width: 20vw;
  max-width: 400px;
}

.horizontal-spacing.end {
  width: 50vw;
  margin-left: -240px;
}

.horizontal-scroll-container {
  z-index: 3;
  flex: none;
  width: 480px;
  position: relative;
}

.card-container {
  cursor: default;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
  overflow: visible;
}

.card-container._48px-padding {
  padding: 48px;
}

.card-container._48px-padding.top-media {
  padding-top: 32px;
}

.card-container._48px-padding.bottom-media {
  padding-bottom: 24px;
}

.card-container._48px-padding.vertical-fill {
  flex: 1;
}

.card-container._48px-padding.bottom-media-zero {
  padding-bottom: 0;
}

.card-container.media-description {
  padding-left: 32px;
  padding-right: 32px;
}

.card-container._80px-padding {
  padding: 80px;
}

.card-container._80px-padding.right-media {
  padding-right: 56px;
}

.card-container.project-hero-text-container {
  padding: 64px;
}

.card-container.project-hero-text-container.horizontal-centered {
  align-items: center;
}

.card-container.project-hero-text-container.mini-hero {
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.card-container.project-hero-text-container.hero-bottom-media {
  padding-bottom: 32px;
}

.card-container.project-hero-text-container.hero-right-media {
  padding-right: 48px;
}

.card-container.home-hero-container {
  padding: 88px 108px;
}

.card-container._80-64px-padding {
  padding: 80px 64px;
}

.card-container._80-64px-padding.right-media {
  padding-right: 48px;
}

.card-container.card-vertical-fill {
  flex: 1;
  height: auto;
}

.card-container._48px-padding-copy {
  padding: 48px 80px;
}

.card-container._48px-padding-copy.top-media {
  padding-top: 32px;
}

.card-container._48px-padding-copy.bottom-media {
  padding-bottom: 24px;
}

.card-container._48px-padding-copy.vertical-fill {
  flex: 1;
}

.video-player-adjust {
  margin-bottom: -7px;
}

.custom-button-small {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border: 2px solid var(--border--light);
  cursor: pointer;
  border-radius: 59px;
  flex: none;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  justify-content: center;
  place-items: center;
  width: 56px;
  height: 56px;
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
  display: flex;
}

.custom-button-small:hover {
  border-width: 6px;
}

.custom-button-small:active {
  background-color: var(--border--light);
}

.custom-button-small.dark {
  border-color: var(--border--dark);
  color: var(--dark--paragraph);
}

.custom-button-small.dark:active {
  background-color: var(--border--dark);
  border-color: #0000;
}

.expandable-button-ghost {
  z-index: 10;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  place-content: space-around flex-start;
  place-items: flex-start start;
  width: 100%;
  display: block;
}

.expandable-button-ghost-lottie-animation {
  width: 12px;
  height: 22px;
  margin-right: 10px;
}

.expandable-button-ghost-lottie-animation.ghost {
  opacity: .4;
  height: 24px;
  margin-right: 0;
}

.swiper-wrapper {
  width: 100%;
  position: relative;
}

.swiper-wrapper.virtual-view-wrapper {
  width: 90vw;
  max-width: 1440px;
}

.swiper-wrapper.bytedance-research-wrapper {
  width: auto;
  padding-left: 5vw;
  padding-right: 5vw;
  display: flex;
  overflow: hidden;
}

.swiper-wrapper.live-avatar-wrapper {
  width: 90vw;
  max-width: 1440px;
}

.swiper-wrapper.rog-research-wrapper {
  flex-direction: column;
  align-items: center;
  width: auto;
  display: flex;
}

.swiper-wrapper.rog-process-wrapper {
  flex-direction: column;
  align-items: center;
  width: 90vw;
  max-width: 1280px;
  display: flex;
}

.swiper-wrapper.poparazzi-wrapper, .swiper-wrapper.other-client-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 85vw;
  max-width: 960px;
  display: flex;
  position: static;
}

.swiper-wrapper.mr-trend-wrapper, .swiper-wrapper.mr-home-wrapper {
  flex-direction: column;
  align-items: center;
  width: auto;
  display: flex;
}

.swiper-wrapper.mr-process-wrapper {
  flex-direction: column;
  align-items: center;
  width: 90vw;
  max-width: 1280px;
  display: flex;
}

.swiper-list {
  align-items: stretch;
  width: 100%;
  display: flex;
}

.swiper-list.virtual-view-list {
  width: 90vw;
  max-width: 1440px;
}

.swiper-list.bytedance-research-list {
  width: 85vw;
  max-width: 960px;
}

.swiper-list.live-avatar-list {
  width: 90vw;
  max-width: 1440px;
}

.swiper-list.rog-research-list {
  width: 85vw;
  max-width: 960px;
}

.swiper-list.rog-process-list {
  width: 90vw;
  max-width: 1280px;
}

.swiper-list.poparazzi-list, .swiper-list.other-client-list {
  z-index: 5;
  width: 85vw;
  max-width: 960px;
  position: relative;
}

.swiper-list.mr-trend-list, .swiper-list.mr-home-list {
  width: 90vw;
  max-width: 1080px;
}

.swiper-list.mr-process-list {
  width: 90vw;
  max-width: 1280px;
}

.swiper-item {
  flex: none;
  width: 100%;
  display: flex;
}

.swiper-item.virtual-view-item {
  max-width: 700px;
}

.swiper-item.bytedance-research-item {
  max-width: 640px;
}

.swiper-item.live-avatar-item {
  max-width: 700px;
}

.swiper-item.rog-research-item, .swiper-item.rog-process-item {
  max-width: 720px;
}

.swiper-item.poparazzi-item {
  max-width: 440px;
}

.swiper-item.other-client-item {
  max-width: 540px;
}

.swiper-item.mr-trend-item {
  max-width: 640px;
}

.swiper-item.mr-home-item {
  max-width: 560px;
}

.swiper-item.mr-process-item {
  max-width: 640px;
}

.swiper-prev-button {
  z-index: 10;
  border: 2px solid var(--border--translucent);
  cursor: pointer;
  background-color: #0000;
  border-radius: 32px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  transition: all .6s cubic-bezier(.075, .82, .165, 1);
  display: flex;
  overflow: visible;
}

.swiper-prev-button:hover {
  border-width: 6px;
  transform: scale(.88);
}

.swiper-prev-button:active {
  background-color: var(--border--translucent);
  border-color: #0000;
}

.swiper-prev-button.disabled {
  opacity: .35;
  cursor: default;
}

.swiper-prev-button.disabled:hover {
  border-width: 2px;
  transform: none;
}

.swiper-prev-button.disabled:active {
  border-color: var(--border--translucent);
  background-color: #0000;
}

.swiper-controller-container {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  display: flex;
}

.swiper-controller-container.dark {
  background-color: var(--dark);
}

.bytedance-research-prev-slide {
  z-index: 10;
  border: 2px solid var(--border--translucent);
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  cursor: pointer;
  background-color: #fffc;
  border-radius: 32px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
  display: flex;
  overflow: visible;
}

.bytedance-research-prev-slide:hover {
  border-width: 6px;
}

.bytedance-research-prev-slide:active {
  background-color: #ebebebcc;
  border-color: #0000;
}

.swiper-next-button {
  z-index: 10;
  border: 2px solid var(--border--translucent);
  cursor: pointer;
  background-color: #0000;
  border-radius: 28px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  transition: all .6s cubic-bezier(.075, .82, .165, 1);
  display: flex;
  overflow: visible;
}

.swiper-next-button:hover {
  border-width: 6px;
  transform: scale(.88);
}

.swiper-next-button:active {
  background-color: var(--border--translucent);
  border-color: #0000;
}

.swiper-next-button.disabled {
  opacity: .35;
  cursor: default;
}

.swiper-next-button.disabled:hover {
  border-width: 2px;
  transform: none;
}

.swiper-next-button.disabled:active {
  border-color: var(--border--translucent);
  background-color: #0000;
}

._12px-corner {
  border-radius: 12px;
}

._12px-corner.shadow {
  box-shadow: 0 132px 53px #cfcfcf03, 0 74px 44px #cfcfcf0d, 0 33px 33px #cfcfcf17, 0 8px 18px #cfcfcf1a;
}

._12px-corner.shadow.border {
  border: 1px solid var(--border--translucent);
}

.swiper-item-drag-overlay {
  z-index: 10;
  cursor: grab;
  position: absolute;
  inset: 0%;
}

.media-faded-overlay-left {
  z-index: 5;
  background-image: linear-gradient(to right, #f7f7f7, #f7f7f700);
  width: 5vw;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.media-faded-overlay-left.white {
  background-image: linear-gradient(to right, #fff, #fff0);
}

.custom-button-tiny {
  cursor: pointer;
  border-radius: 12px;
  flex: none;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  justify-content: center;
  place-items: center;
  width: 24px;
  height: 24px;
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
  display: flex;
}

.custom-button-tiny:active {
  background-color: var(--border--light);
}

.paragraph-bold.dark-primary {
  color: var(--text--dark--primary);
}

.basic-content-container.mobile-show {
  display: none;
}

.swiper-prev-button-dark {
  z-index: 10;
  border: 2px solid var(--border--dark);
  color: var(--text--dark--primary);
  cursor: pointer;
  background-color: #0000;
  border-radius: 32px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  transition: all .6s cubic-bezier(.075, .82, .165, 1);
  display: flex;
  overflow: visible;
}

.swiper-prev-button-dark:hover {
  border-width: 6px;
  transform: scale(.88);
}

.swiper-prev-button-dark:active {
  background-color: var(--border--dark);
  border-color: #0000;
}

.swiper-prev-button-dark.disabled {
  opacity: .35;
  cursor: default;
}

.swiper-prev-button-dark.disabled:hover {
  border-width: 2px;
  transform: none;
}

.swiper-prev-button-dark.disabled:active {
  border-color: var(--border--dark);
  background-color: #0000;
}

.swiper-prev-button-dark.rog-research-prev, .swiper-prev-button-dark.rog-process-prev, .swiper-prev-button-dark.poparazzi-prev, .swiper-prev-button-dark.mr-trend-prev, .swiper-prev-button-dark.mr-home-prev, .swiper-prev-button-dark.mr-process-prev {
  color: var(--text--dark--primary);
}

.swiper-next-button-dark {
  z-index: 10;
  border: 2px solid var(--border--dark);
  color: var(--text--dark--primary);
  cursor: pointer;
  background-color: #0000;
  border-radius: 28px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  transition: all .6s cubic-bezier(.075, .82, .165, 1);
  display: flex;
  overflow: visible;
}

.swiper-next-button-dark:hover {
  border-width: 6px;
  transform: scale(.88);
}

.swiper-next-button-dark:active {
  background-color: var(--border--dark);
  border-color: #0000;
}

.swiper-next-button-dark.disabled {
  opacity: .35;
  cursor: default;
}

.swiper-next-button-dark.disabled:hover {
  border-width: 2px;
  transform: none;
}

.swiper-next-button-dark.disabled:active {
  border-color: var(--border--dark);
  background-color: #0000;
}

.media-faded-overlay-bottom {
  z-index: 5;
  background-image: linear-gradient(to top, #f7f7f7, #f7f7f700);
  height: 72px;
  position: absolute;
  inset: auto 0% 0%;
}

.media-faded-overlay-bottom.darker-black {
  background-image: linear-gradient(to top, var(--dark), #0a0a0a00);
}

.media-faded-overlay-bottom.lighter-black {
  background-image: linear-gradient(to top, #1f1f1f, #1f1f1f00);
}

.overflow-video {
  width: 100%;
  margin-bottom: -7px;
}

.overflow-video.background-video {
  z-index: 0;
  position: absolute;
}

.overflow-video.background-video._1920w-max {
  width: 95%;
  max-width: 1920px;
}

.lightbox-vertical-fill {
  flex: 1;
}

.media-faded-overlay-top {
  z-index: 5;
  background-image: linear-gradient(to top, #f7f7f7, #f7f7f700);
  height: 72px;
  position: absolute;
  inset: 0% 0% auto;
}

.media-faded-overlay-top.lighter-black {
  background-image: linear-gradient(to top, #1f1f1f00, #1f1f1fd1 80%, var(--lighter-black));
}

.grain-overlay {
  z-index: 0;
  opacity: .45;
  filter: saturate(0%);
  mix-blend-mode: multiply;
  position: absolute;
  inset: 0%;
}

.blob-container {
  opacity: .16;
  filter: blur(48px);
  position: fixed;
  inset: 0%;
}

.open-source-custom-button {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 2px solid var(--border--light);
  border-radius: 60px;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  justify-content: space-between;
  place-items: center;
  width: 100%;
  padding: 14px 32px 14px 22px;
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
  display: flex;
}

.open-source-custom-button:hover {
  border-width: 6px;
  padding: 10px 28px 10px 18px;
}

.open-source-custom-button:active {
  background-color: var(--border--light);
}

.open-source-custom-button.dark {
  border-color: var(--border--dark);
}

.logo-background-gradient {
  z-index: 0;
  background-image: radial-gradient(circle farthest-side, #fff 30%, #fff0);
  width: 400px;
  height: 400px;
  position: absolute;
}

.list-item.dark {
  color: var(--dark--paragraph);
}

.index-bar {
  width: 100%;
  max-width: 1080px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  line-height: 130%;
  overflow: hidden;
}

.index-bar:hover {
  font-size: 14px;
  line-height: 130%;
}

.index-item {
  opacity: .75;
  color: var(--text--translucent--secondary);
  border-radius: 100px;
  padding: 6px 10px;
  font-size: 14px;
  transition: all .2s;
  overflow: hidden;
}

.index-item:hover {
  background-color: #0000000f;
  font-size: 14px;
}

.index-item.w--current {
  opacity: 1;
  color: var(--text--translucent--primary);
  background-color: #0000000f;
  font-size: 14px;
}

.index-item.edit {
  color: var(--black);
  font-size: 10px;
  line-height: 100%;
}

.index-item.dark {
  color: var(--text--dark--secondary);
}

.index-item.dark:hover {
  color: var(--border--light);
  background-color: #ffffff1f;
}

.index-item.dark.w--current {
  color: var(--text--dark--primary);
  background-color: #ffffff1f;
}

.intex-item-text {
  font-size: 14px;
  line-height: 130%;
}

.intex-item-text.dark-secondary {
  color: var(--text--dark--secondary);
}

.index-item-text {
  text-align: center;
}

.index-item-new {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding-bottom: 12px;
  display: flex;
  position: relative;
}

.index-item-text-new {
  opacity: 0;
}

.div-block {
  background-color: var(--text--translucent--secondary);
  border-radius: 20px;
  flex: none;
  width: 8px;
  height: 8px;
}

.index-bar-area {
  z-index: 9999999;
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  background-color: #ffffff80;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: auto 0% 0%;
}

.index-bar-area.hidden {
  display: none;
}

.index-bar-area.dark {
  background-color: #0a0a0a80;
}

.index-bar-background-controller {
  width: 64px;
  height: 64px;
  position: absolute;
  inset: 0% auto auto 0%;
}

html.w-mod-js [data-ix="load-up"] {
  opacity: 0;
  transform: translate(0, 50px);
}

@media screen and (max-width: 991px) {
  body {
    font-size: 16px;
  }

  h1, h2 {
    font-size: 30px;
  }

  h3, h4 {
    font-size: 24px;
  }

  h5 {
    font-size: 18px;
  }

  h6 {
    font-size: 12px;
  }

  p {
    font-size: 16px;
    line-height: 150%;
  }

  li {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 140%;
  }

  img {
    border-radius: 16px;
  }

  blockquote {
    padding-left: 32px;
    padding-right: 32px;
    font-size: 20px;
  }

  .utility-page-content {
    width: 60%;
  }

  .footer-container-1 {
    grid-column-gap: 0vw;
    grid-row-gap: 64px;
    grid-template-rows: auto auto;
    grid-template-columns: auto;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    justify-items: start;
  }

  .basic-button {
    padding: 10px 28px;
    font-size: 16px;
  }

  .basic-button:hover {
    padding: 6px 24px;
  }

  .footer {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .footer-content-container {
    grid-row-gap: 8px;
  }

  .footer-icon-link:hover {
    background-image: none;
  }

  .footer-link-container {
    grid-column-gap: 36px;
    grid-row-gap: 36px;
  }

  .heading-1.dark-primary.on-your-face {
    font-size: 40px;
  }

  .heading-1.large-number {
    font-size: 64px;
  }

  .heading-1.on-your-face {
    font-size: 40px;
  }

  .main-section {
    padding-top: 72px;
    padding-bottom: 328px;
  }

  .main-section.start {
    min-height: 640px;
    padding-top: 64px;
  }

  .main-section.gemini {
    margin-top: -128px;
    padding-top: 64px;
    padding-bottom: 108px;
  }

  .main-section.galet {
    padding-top: 64px;
    padding-bottom: 128px;
  }

  .main-section.slider-section, .main-section.end {
    padding-top: 64px;
    padding-bottom: 320px;
  }

  .main-section.bytedance-secondary.horizontal-scroll {
    display: none;
  }

  .project-details-rich-text {
    margin-bottom: 144px;
  }

  .project-details-rich-text a {
    font-size: 16px;
  }

  .project-details-rich-text h1 {
    padding-top: 96px;
  }

  .project-details-rich-text h3 {
    margin-top: 64px;
  }

  .main-content-container {
    grid-auto-columns: 1fr;
    justify-items: center;
  }

  .main-content-container.small {
    margin-left: 64px;
    margin-right: 64px;
  }

  .main-content-container._1080w.home {
    width: 90%;
  }

  .main-content-container._1920w.overflow {
    width: 100%;
    min-height: 480px;
  }

  .main-content-container._1280w.content-special {
    width: 85%;
  }

  .main-content-container._1600w.overflow {
    width: 100%;
  }

  .text-field {
    padding: 24px 20px;
    font-size: 16px;
    line-height: 150%;
  }

  .footer-link-heading-6 {
    margin-left: 6px;
    font-size: 14px;
    line-height: 22px;
  }

  .footer-link {
    padding: 6px 6px 4px;
    font-size: 14px;
    line-height: 14px;
  }

  .nav-menu-link-class-container {
    grid-row-gap: 12px;
    justify-items: start;
  }

  .nav-menu-link-container-small {
    align-items: flex-start;
  }

  .hero-image-container {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .footer-container-2 {
    grid-column-gap: 0vw;
    grid-row-gap: 45px;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    justify-items: start;
  }

  .footer-home-button {
    padding: 9px;
  }

  .work-project-container {
    grid-template-rows: auto auto;
    grid-template-columns: auto;
    justify-items: start;
    margin-bottom: 32px;
  }

  .image-sharp-corner.card-horizontal-fill.top-left-start._640px-min-height, .image-sharp-corner.card-horizontal-fill.top-left-start._640px-max-height, .image-sharp-corner.card-horizontal-fill.center-start._640px-min-height {
    min-height: 0;
  }

  .project-hero-container {
    grid-auto-columns: auto;
    margin-top: -32px;
    padding: 64px 64px 64px 72px;
  }

  .main-split-content {
    grid-auto-columns: 1fr;
    margin-left: 0;
  }

  .main-split-content._6-2 {
    grid-column-gap: 32px;
    grid-auto-columns: auto;
  }

  .main-split-content._2-6 {
    grid-auto-columns: auto;
  }

  .main-split-content._2-3 {
    grid-column-gap: 28px;
    grid-auto-columns: auto;
  }

  .main-split-content._2-5 {
    grid-template-columns: auto;
    grid-auto-columns: auto;
  }

  .main-split-content.default {
    grid-column-gap: 48px;
  }

  .main-split-content._1-1-1 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-template-columns: 1fr;
  }

  .main-split-content._1-1-1.light {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .main-split-content._1-1 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .main-split-content._1-1._24px {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .main-split-content._1-1._64px {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
  }

  .main-split-content._1-1.thank-you {
    grid-template-columns: auto auto;
    grid-auto-columns: auto;
    justify-items: start;
  }

  .main-split-content._1-1.thank-you-large {
    grid-column-gap: 36px;
    grid-row-gap: 36px;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-rows: auto;
    grid-auto-columns: auto;
    justify-items: start;
  }

  .main-split-content._1-1._48px {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .custom-button {
    padding: 10px 28px;
  }

  .custom-button:hover {
    padding: 6px 24px;
  }

  .custom-button.dark.full-width.disabled:hover {
    padding-top: 10px;
    padding-bottom: 9px;
  }

  .custom-button-text {
    font-size: 16px;
  }

  .custom-button-icon {
    width: 16px;
    height: 16px;
    margin-top: 1px;
  }

  .custom-button-icon.video-control {
    width: 20px;
    height: 20px;
  }

  .expandable-button {
    grid-column-gap: 48px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
  }

  .spacing-medium---48 {
    height: 36px;
  }

  .spacing-large---64 {
    height: 48px;
  }

  .spacing-large---64.home-mini-hero-top-inner {
    height: 24px;
  }

  .main-split-content-container.vertical-distribute {
    height: 100%;
  }

  .spacing-xsmall---16 {
    height: 12px;
  }

  .project-video.bytedance {
    width: 640px;
    margin-left: -320px;
  }

  .project-spacing-prototype.ubi {
    height: 24px;
  }

  .slider-right-arrow {
    width: 48px;
    height: 48px;
    margin-right: 16px;
  }

  .slider-right-arrow.small {
    margin-right: 16px;
  }

  .slider-left-arrow {
    width: 48px;
    height: 48px;
    margin-left: 16px;
  }

  .slider-left-arrow.small {
    margin-left: 16px;
  }

  .aspect-ratio-container {
    border-radius: 16px;
    width: 100%;
    padding-top: 70%;
    position: relative;
    overflow: hidden;
  }

  .aspect-ratio-container._1-1 {
    padding-top: 100%;
  }

  .spacing-small---24 {
    height: 16px;
  }

  .spacing-xlarge---96 {
    height: 72px;
  }

  .quote {
    padding-left: 32px;
  }

  .card {
    border-radius: 16px;
    grid-auto-columns: 1fr;
  }

  .card._24px-padding.ecrecycle-secondary {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .card._48px-padding {
    padding: 32px;
  }

  .heading-4.extra-title {
    font-size: 18px;
  }

  .heading-4.card-title-long {
    font-size: 22px;
  }

  .card-icon.xlarge {
    width: 64px;
    height: 64px;
  }

  .card-icon.xxlarge {
    width: 72px;
    height: 64px;
  }

  .card-icon.xxlarge.encompass {
    margin-left: -4px;
  }

  .mask._640w {
    max-width: 560px;
  }

  .slider-arrow-icon {
    width: 20px;
    height: 20px;
  }

  .home-hero-content-container-2 {
    grid-column-gap: 12px;
  }

  .spacing-xxsmall---8 {
    height: 6px;
  }

  .home-hero-content-container-1 {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .home-project {
    background-image: none;
    padding-top: 72px;
    padding-bottom: 64px;
  }

  .home-project-hero-container {
    grid-row-gap: 12px;
  }

  .home-project-hero-text-container {
    padding: 40px;
  }

  .home-project-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-template-rows: auto 400px 400px 400px;
    grid-auto-rows: 400px;
  }

  .nav-bar-space {
    height: 64px;
  }

  .nav-link-block {
    padding: 10px 16px;
    font-size: 16px;
  }

  .nav-bar-logo {
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    display: flex;
  }

  .ghost-button.large {
    margin-left: -10px;
    padding: 6px 10px;
    font-size: 24px;
  }

  .expandable-button-title-container {
    height: 64px;
  }

  .expandable-content-text-container {
    padding: 32px;
  }

  .expandable-content {
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-columns: auto;
  }

  .nav-link-block-container {
    grid-column-gap: 4px;
  }

  .nav-home-button.w--current, .nav-home-button.delayed {
    width: 48px;
    height: 48px;
  }

  .card-hover-container {
    grid-row-gap: 12px;
  }

  .paragraph-small {
    font-size: 12px;
  }

  .custom-button-icon-animation {
    width: 16px;
    height: 16px;
  }

  .custom-button-2 {
    padding: 10px 28px;
  }

  .custom-button-2:hover {
    padding: 6px 24px;
  }

  .archive-project-hero {
    padding: 10px 28px;
  }

  .archive-project-hero:hover {
    padding: 6px 24px;
  }

  .home-logo-container {
    width: 112px;
    height: 112px;
    margin-left: -10px;
  }

  .home-logo-video:hover {
    transform: scale(.85);
  }

  .slider-faded-overlay-left {
    background-image: linear-gradient(to right, #f7f7f7, #f7f7f700);
    flex: none;
    width: 7.5vw;
  }

  .slider-faded-overlay-right {
    background-image: linear-gradient(to right, #f7f7f700, #f7f7f7);
    flex: none;
    width: 7.5vw;
  }

  .spacing-small-medium---32 {
    height: 28px;
  }

  .horizontal-content-container {
    grid-auto-columns: 1fr;
    justify-items: center;
  }

  .horizontal-content-container._24px-gap.poparazzi-adjusted {
    padding-left: 16px;
    padding-right: 16px;
  }

  .horizontal-spacing._25vw {
    width: 320px;
  }

  .horizontal-spacing.end {
    margin-left: -160px;
  }

  .horizontal-scroll-container {
    width: 320px;
  }

  .card-container {
    grid-auto-columns: 1fr;
  }

  .card-container._48px-padding {
    padding: 32px;
  }

  .card-container._48px-padding.top-media {
    padding-top: 20px;
  }

  .card-container._48px-padding.bottom-media {
    padding-bottom: 16px;
  }

  .card-container._48px-padding.bottom-media-zero {
    padding-bottom: 0;
  }

  .card-container.media-description {
    padding-left: 28px;
    padding-right: 28px;
  }

  .card-container._80px-padding {
    padding: 32px;
  }

  .card-container._80px-padding.right-media {
    padding-right: 20px;
  }

  .card-container.project-hero-text-container {
    padding: 48px;
  }

  .card-container.project-hero-text-container.hero-bottom-media {
    padding-bottom: 24px;
  }

  .card-container.project-hero-text-container.hero-right-media {
    padding-right: 32px;
  }

  .card-container.home-hero-container {
    padding: 64px;
  }

  .card-container._80-64px-padding {
    padding: 32px;
  }

  .card-container._80-64px-padding.right-media {
    padding-right: 20px;
  }

  .card-container._48px-padding-copy {
    padding: 32px;
  }

  .card-container._48px-padding-copy.top-media {
    padding-top: 20px;
  }

  .card-container._48px-padding-copy.bottom-media {
    padding-bottom: 16px;
  }

  .card-container._48px-padding-copy.vertical-fill {
    padding-left: 64px;
    padding-right: 64px;
  }

  .custom-button-small {
    width: 48px;
    height: 48px;
  }

  .expandable-button-ghost {
    grid-column-gap: 48px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
  }

  .swiper-wrapper.bytedance-research-wrapper, .swiper-wrapper.rog-research-wrapper {
    padding-left: 7.5vw;
    padding-right: 7.5vw;
  }

  .swiper-wrapper.rog-process-wrapper {
    width: 90vw;
    max-width: 1280px;
  }

  .swiper-wrapper.mr-trend-wrapper, .swiper-wrapper.mr-home-wrapper {
    padding-left: 7.5vw;
    padding-right: 7.5vw;
  }

  .swiper-wrapper.mr-process-wrapper {
    width: 90vw;
    max-width: 1280px;
  }

  .swiper-item.poparazzi-item, .swiper-item.other-client-item {
    max-width: 400px;
  }

  .swiper-prev-button, .bytedance-research-prev-slide, .swiper-next-button {
    width: 48px;
    height: 48px;
  }

  ._12px-corner {
    border-radius: 6px;
  }

  .media-faded-overlay-left {
    background-image: linear-gradient(to right, #f7f7f7, #f7f7f700);
    flex: none;
    width: 7.5vw;
  }

  .custom-button-tiny, .swiper-prev-button-dark, .swiper-next-button-dark {
    width: 48px;
    height: 48px;
  }

  .media-faded-overlay-bottom {
    flex: none;
    height: 32px;
  }

  .overflow-video.background-video._1920w-max {
    width: auto;
  }

  .media-faded-overlay-top {
    flex: none;
    height: 32px;
  }

  .open-source-custom-button {
    padding: 10px 28px 10px 15px;
  }

  .open-source-custom-button:hover {
    padding: 6px 24px 6px 11px;
  }

  .index-bar {
    display: none;
  }

  .intex-item-text {
    font-size: 12px;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 18px;
  }

  h1, h2 {
    font-size: 28px;
    line-height: 120%;
  }

  h3, h4 {
    font-size: 22px;
    line-height: 140%;
  }

  h5 {
    font-size: 16px;
  }

  li {
    margin-top: 2px;
    margin-bottom: 2px;
  }

  img {
    border-radius: 12px;
  }

  .utility-page-content {
    width: 80%;
  }

  .utility-page-form {
    width: auto;
  }

  .footer-container-1 {
    grid-row-gap: 48px;
  }

  .basic-button:hover {
    border-width: 2px;
    padding: 10px 28px;
  }

  .basic-button.w--current {
    border-radius: 8px;
    padding: 16px 20px 14px;
    font-size: 12px;
    line-height: 12px;
  }

  .basic-button.w--current:hover {
    transform: none;
  }

  .footer {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .footer-content-container {
    grid-row-gap: 4px;
  }

  .link-container {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    place-items: start center;
  }

  .footer-link-container {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .heading-1 {
    padding-top: 8px;
  }

  .heading-1:hover {
    transform: none;
  }

  .heading-1.dark-primary.on-your-face, .heading-1.on-your-face {
    font-size: 32px;
  }

  .heading-3 {
    margin-bottom: 0;
  }

  .heading-3:hover {
    transform: none;
  }

  .main-section {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding-top: 48px;
    padding-bottom: 304px;
  }

  .main-section.start {
    min-height: 520px;
    padding-bottom: 4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .main-section.gemini {
    margin-top: -96px;
    padding-top: 48px;
    padding-bottom: 256px;
  }

  .main-section.galet {
    padding-top: 48px;
    padding-bottom: 96px;
  }

  .main-section.slider-section, .main-section.end {
    padding-top: 48px;
    padding-bottom: 304px;
  }

  .project-details-rich-text {
    margin-bottom: 128px;
  }

  .project-details-rich-text a {
    font-size: 16px;
  }

  .project-details-rich-text h1 {
    padding-top: 72px;
  }

  .project-details-rich-text h3 {
    margin-top: 48px;
  }

  .main-content-container {
    grid-auto-columns: 1fr;
    justify-items: center;
  }

  .main-content-container.small {
    margin-left: 48px;
    margin-right: 48px;
  }

  .main-content-container._960w, .main-content-container._1080w {
    width: 88%;
  }

  .main-content-container._1080w.home {
    max-width: 540px;
  }

  .main-content-container._1920w {
    width: 95%;
  }

  .main-content-container._1920w.overflow {
    min-height: 320px;
  }

  .main-content-container._1440w, .main-content-container._1280w {
    width: 95%;
  }

  .main-content-container._1280w.prototype, .main-content-container._1280w.content-special {
    width: 88%;
  }

  .main-content-container._1600w {
    width: 95%;
  }

  .main-content-container._1600w.desktop-hide {
    display: flex;
  }

  .footer-link-heading-6:hover, .footer-link:hover {
    transform: none;
  }

  .nav-menu-link-class-container {
    grid-row-gap: 6px;
  }

  .footer-container-2 {
    grid-column-gap: 6vw;
    grid-row-gap: 0vh;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }

  .footer-home-button:hover {
    background-color: #0000;
  }

  .work-project-container {
    grid-row-gap: 36px;
  }

  .image-sharp-corner.card-horizontal-fill.top-left-start._640px-max-height {
    max-height: 480px;
  }

  .image-sharp-corner.card-horizontal-fill.center-start._480px-max-height {
    max-height: 360px;
  }

  .project-hero-container {
    grid-auto-columns: auto;
    width: 95%;
    padding: 48px 48px 48px 56px;
  }

  .project-hero-container:hover {
    transform: none;
  }

  .main-split-content {
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-columns: auto;
  }

  .main-split-content.prototype {
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-rows: 1fr;
  }

  .main-split-content.prototype.ubi {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .main-split-content.prototype.ubi.reverse {
    grid-template-columns: 1fr;
  }

  .main-split-content._6-2 {
    grid-template-columns: 2fr;
  }

  .main-split-content._2-6 {
    grid-template-columns: 6fr;
  }

  .main-split-content._2-3 {
    grid-template-columns: 3fr;
    grid-auto-rows: auto;
  }

  .main-split-content.default {
    grid-template-columns: auto;
  }

  .main-split-content._1-1-1.light {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }

  .main-split-content._1-1-1._24px-padding {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .main-split-content._1-1 {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .main-split-content._1-1._24px {
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }

  .main-split-content._1-1._24px.vertical-filled {
    align-items: start;
  }

  .main-split-content._1-1._64px {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    grid-auto-rows: auto;
    align-items: start;
  }

  .main-split-content._1-1.thank-you-large {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .main-split-content._1-1.desktop-show {
    display: none;
  }

  .main-split-content._1-1._48px {
    grid-template-rows: auto;
    grid-auto-rows: auto;
  }

  .custom-button:hover {
    border-width: 2px;
    padding: 10px 28px;
  }

  .custom-button.dark.right-icon, .custom-button.right-icon.translucent {
    width: 100%;
  }

  .custom-button-icon {
    margin-top: 2px;
  }

  .expandable-button {
    grid-column-gap: 0px;
    grid-row-gap: 32px;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    grid-auto-rows: auto;
  }

  .expandable-button:hover {
    box-shadow: inset 0 0 0 2px var(--border--light);
    transform: none;
  }

  .spacing-medium---48 {
    height: 28px;
  }

  .spacing-large---64 {
    height: 36px;
  }

  .spacing-large---64.home-mini-hero-outter {
    height: 48px;
  }

  .spacing-xsmall---16 {
    height: 8px;
  }

  .project-switch-buttons-container {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-auto-flow: row;
  }

  .project-video {
    width: 50%;
  }

  .project-video.ubi {
    width: 100%;
  }

  .project-video.bytedance {
    width: auto;
  }

  .project-spacing-prototype {
    height: 40px;
  }

  .project-spacing-prototype.ubi {
    height: 48px;
  }

  .slider-right-arrow {
    width: 40px;
    height: 40px;
    margin-right: -100%;
  }

  .slider-right-arrow:hover {
    border-width: 2px;
  }

  .slider-left-arrow {
    width: 40px;
    height: 40px;
    margin-left: -100%;
  }

  .slider-left-arrow:hover {
    border-width: 2px;
  }

  .aspect-ratio-container {
    border-radius: 12px;
  }

  .project-hero-background {
    border-radius: 16px;
  }

  .spacing-small---24 {
    height: 16px;
  }

  .spacing-xlarge---96 {
    height: 48px;
  }

  .project-split-content-1-1-1-1 {
    grid-column-gap: 16px;
    grid-row-gap: 32px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .card {
    border-radius: 12px;
    grid-auto-columns: 1fr;
  }

  .card:hover {
    transform: none;
  }

  .card._48px-padding {
    grid-auto-columns: 1fr;
  }

  .card.white-w-border.shadow.mobile-show {
    display: flex;
  }

  .card.white-w-border.shadow.mobile-hide {
    display: none;
  }

  .card.translucent.shadow.mobile-show {
    display: flex;
  }

  .card.translucent.shadow.mobile-hide {
    display: none;
  }

  .heading-4.extra-title {
    font-size: 16px;
  }

  .heading-4.card-title-long {
    font-size: 20px;
  }

  .card-icon.xlarge {
    width: 48px;
    height: 48px;
  }

  .card-icon.xxlarge {
    width: 64px;
    height: 48px;
  }

  .card-icon.xxlarge.encompass {
    margin-left: -2px;
  }

  .home-hero-content-container-2 {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 100%;
    justify-items: stretch;
    width: 100%;
  }

  .spacing-xxsmall---8 {
    height: 4px;
  }

  .home-hero-content-container-1 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-direction: column;
    grid-template-rows: auto auto;
    grid-template-columns: auto;
    align-items: flex-start;
  }

  .home-project {
    background-image: linear-gradient(#0000, #0000);
    padding-bottom: 32px;
  }

  .home-project-hero-container {
    grid-row-gap: 8px;
  }

  .home-project-hero-container:hover {
    transform: none;
  }

  .home-project-hero-text-container {
    padding: 60px 60px 32px;
  }

  .home-project-grid {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-direction: column;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    display: flex;
  }

  .image-div.bytedance {
    background-repeat: no-repeat;
    background-size: auto;
  }

  .nav-link-block {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    padding: 6px 8px;
  }

  .ghost-button.large {
    font-size: 22px;
  }

  .footer-logo {
    width: 96px;
    height: 32px;
  }

  .expandable-content {
    grid-auto-rows: auto;
    grid-auto-columns: auto;
  }

  .expandable-content:hover {
    transform: none;
    box-shadow: inset 0 0 0 2px #e8e8e8;
  }

  .nav-link-block-container {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .card-hover-container {
    grid-row-gap: 8px;
  }

  .card-hover-container:hover {
    transform: none;
  }

  .custom-button-2:hover, .archive-project-hero:hover {
    border-width: 2px;
    padding: 10px 28px;
  }

  .home-logo-container {
    width: 100px;
    height: 100px;
  }

  .home-logo-video {
    transition-property: none;
  }

  .home-logo-video:hover {
    transform: none;
  }

  .slider-faded-overlay-left, .slider-faded-overlay-right {
    display: none;
  }

  .swipe-indication {
    display: flex;
  }

  .spacing-small-medium---32 {
    height: 24px;
  }

  .horizontal-content-container {
    grid-auto-columns: 1fr;
    justify-items: center;
  }

  .horizontal-content-container.card-content-container {
    flex-direction: column;
    display: flex;
  }

  .horizontal-content-container.card-content-container._1-1 {
    grid-template-rows: auto auto;
    grid-template-columns: auto;
  }

  .card-container {
    grid-auto-columns: 1fr;
  }

  .card-container:hover {
    transform: none;
  }

  .card-container._48px-padding {
    grid-auto-columns: 1fr;
  }

  .card-container.media-description {
    padding-left: 24px;
    padding-right: 24px;
  }

  .card-container._80px-padding.right-media {
    flex: none;
    padding-bottom: 20px;
    padding-right: 32px;
  }

  .card-container.project-hero-text-container.hero-right-media {
    flex: none;
    padding-bottom: 24px;
    padding-right: 48px;
  }

  .card-container.home-hero-container {
    padding: 48px;
  }

  .card-container._80-64px-padding.right-media {
    padding: 32px 32px 20px;
  }

  .card-container._48px-padding-copy {
    grid-auto-columns: 1fr;
  }

  .card-container._48px-padding-copy.vertical-fill {
    padding-left: 40px;
    padding-right: 40px;
  }

  .custom-button-small {
    width: 40px;
    height: 40px;
  }

  .custom-button-small:hover {
    border-width: 2px;
  }

  .expandable-button-ghost {
    grid-column-gap: 0px;
    grid-row-gap: 32px;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    grid-auto-rows: auto;
  }

  .swiper-wrapper.virtual-view-wrapper, .swiper-wrapper.live-avatar-wrapper {
    width: 88vw;
  }

  .swiper-wrapper.rog-research-wrapper {
    display: none;
  }

  .swiper-wrapper.rog-process-wrapper, .swiper-wrapper.poparazzi-wrapper, .swiper-wrapper.other-client-wrapper, .swiper-wrapper.mr-process-wrapper, .swiper-list.virtual-view-list, .swiper-list.bytedance-research-list, .swiper-list.live-avatar-list, .swiper-list.rog-research-list, .swiper-list.rog-process-list, .swiper-list.poparazzi-list, .swiper-list.other-client-list, .swiper-list.mr-trend-list, .swiper-list.mr-home-list, .swiper-list.mr-process-list {
    width: 88vw;
  }

  .swiper-item.poparazzi-item, .swiper-item.other-client-item {
    max-width: 320px;
  }

  .swiper-prev-button {
    width: 40px;
    height: 40px;
  }

  .swiper-prev-button:hover {
    border-width: 2px;
    transform: none;
  }

  .swiper-controller-container {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .bytedance-research-prev-slide {
    width: 40px;
    height: 40px;
  }

  .bytedance-research-prev-slide:hover {
    border-width: 2px;
  }

  .swiper-next-button {
    width: 40px;
    height: 40px;
  }

  .swiper-next-button:hover {
    border-width: 2px;
    transform: none;
  }

  ._12px-corner {
    border-radius: 4px;
  }

  .media-faded-overlay-left {
    display: none;
  }

  .custom-button-tiny {
    width: 40px;
    height: 40px;
  }

  .custom-button-tiny:hover {
    border-width: 2px;
  }

  .basic-content-container.mobile-show {
    display: block;
  }

  .swiper-prev-button-dark {
    width: 40px;
    height: 40px;
  }

  .swiper-prev-button-dark:hover {
    border-width: 2px;
    transform: none;
  }

  .swiper-next-button-dark {
    width: 40px;
    height: 40px;
  }

  .swiper-next-button-dark:hover {
    border-width: 2px;
    transform: none;
  }

  .media-faded-overlay-bottom {
    height: 48px;
  }

  .overflow-video.background-video._1920w-max {
    left: 0;
  }

  .media-faded-overlay-top {
    height: 48px;
  }

  .open-source-custom-button:hover {
    border-width: 2px;
    padding: 10px 28px 10px 15px;
  }
}

@media screen and (max-width: 479px) {
  h1, h2 {
    letter-spacing: -.75px;
  }

  .basic-button:hover {
    box-shadow: inset -1px 0 #fff, inset 0 -1px #fff, inset 1px 0 #fff, inset 0 1px #fff;
  }

  .basic-button.w--current {
    border-radius: 12px;
    padding: 18px 24px 16px;
    font-size: 14px;
    line-height: 14px;
  }

  .footer-content-container {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    place-items: center;
  }

  .link-container {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .footer-icon-link {
    padding: 4px;
  }

  .footer-link-container {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .main-section {
    z-index: 5;
  }

  .main-section.gemini {
    padding-bottom: 256px;
  }

  .main-section.slider-section, .main-section.end {
    padding-top: 36px;
    padding-bottom: 292px;
  }

  .project-details-rich-text img {
    margin-bottom: 24px;
  }

  .project-details-rich-text h1 {
    padding-top: 64px;
  }

  .project-details-rich-text h5 {
    margin-bottom: 12px;
  }

  .project-details-rich-text h6 {
    margin-top: 12px;
  }

  .main-content-container {
    grid-auto-columns: 1fr;
  }

  .main-content-container.small {
    margin-left: 24px;
    margin-right: 24px;
  }

  .main-content-container._1080w.home {
    width: 95%;
  }

  .main-content-container._1920w.overflow {
    min-height: 280px;
  }

  .footer-link-heading-6 {
    margin-left: 6px;
  }

  .hero-image-container {
    overflow: visible;
  }

  .footer-container-2 {
    grid-column-gap: 0vw;
    grid-row-gap: 30px;
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .image-sharp-corner.card-horizontal-fill.center-start._480px-max-height {
    max-height: 280px;
  }

  .project-hero-container {
    margin-top: -54px;
    padding: 40px 32px 40px 40px;
  }

  .project-hero-container.about {
    background-position: 50% 100%;
  }

  .main-split-content {
    grid-auto-columns: auto;
  }

  .main-split-content._1-1._24px, .main-split-content._1-1._48px {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-auto-rows: auto;
  }

  .custom-button.right-icon {
    width: 100%;
  }

  .expandable-button {
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-auto-rows: auto;
    justify-items: center;
  }

  .expandable-slider-image {
    width: 210px;
    height: 140px;
  }

  .spacing-large---64.home-mini-hero-outter {
    height: 32px;
  }

  .spacing-large---64.home-mini-hero-top-inner {
    height: 16px;
  }

  .project-switch-buttons-container {
    flex-direction: column;
    width: 100%;
  }

  .slider-right-arrow.small {
    margin-right: 10px;
  }

  .slider-left-arrow.small {
    margin-left: 10px;
  }

  .spacing-small---24.specialized {
    height: 24px;
  }

  .home-hero-content-container-2 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-direction: column;
    grid-template-rows: 1fr 1fr;
  }

  .home-project {
    background-image: linear-gradient(#0000, #0000);
    padding-top: 64px;
    padding-bottom: 16px;
  }

  .home-project-hero-text-container {
    padding: 36px 32px 16px;
  }

  .image-div.bytedance {
    background-size: cover;
  }

  .nav-bar-logo {
    width: 28px;
    height: 28px;
  }

  .nav-bar-content-container {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-direction: row;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-items: center;
  }

  .footer-icon {
    width: 20px;
    height: 20px;
  }

  .expandable-content {
    grid-auto-rows: auto;
    grid-auto-columns: auto;
    justify-items: center;
  }

  .nav-home-button.delayed {
    width: 40px;
    height: 40px;
  }

  .password-button-container {
    flex-direction: column;
    display: flex;
  }

  .error-message {
    padding-left: 24px;
    padding-right: 24px;
  }

  .home-logo-container {
    width: 80px;
    height: 80px;
  }

  .horizontal-content-container {
    grid-auto-columns: 1fr;
  }

  .card-container.project-hero-text-container {
    padding: 32px;
  }

  .card-container.project-hero-text-container.mini-hero {
    padding-left: 32px;
    padding-right: 32px;
  }

  .card-container.project-hero-text-container.hero-bottom-media {
    padding-bottom: 16px;
  }

  .card-container.home-hero-container {
    padding: 32px;
  }

  .card-container._48px-padding-copy.vertical-fill {
    padding: 24px;
  }

  .expandable-button-ghost {
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-auto-rows: auto;
    justify-items: center;
  }

  .swiper-item.poparazzi-item, .swiper-item.other-client-item {
    max-width: none;
  }

  .media-faded-overlay-bottom, .media-faded-overlay-top {
    height: 32px;
  }
}

#w-node-_2695be32-2335-e3dc-a1ae-36453afd04c7-87708a25, #w-node-_0e52f476-1a39-da10-cf66-b181e26e5cbf-87708a25, #w-node-_17de3d06-4450-a41f-6462-af6181c5fbc6-87708a25, #w-node-_17de3d06-4450-a41f-6462-af6181c5fbce-87708a25, #w-node-_03c056a8-0df0-7327-3fa1-2c1d55569de9-87708a25, #w-node-_03c056a8-0df0-7327-3fa1-2c1d55569df1-87708a25, #w-node-_03c056a8-0df0-7327-3fa1-2c1d55569df9-87708a25, #w-node-d5d03526-c988-d62c-e352-15f00e5541bb-87708a25 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-ac90a9d2-31cd-abef-c71f-b25984c78aa6-61708a58, #w-node-b5f2108e-5cba-f13a-5c1e-bd0579e1f3c1-61708a58, #w-node-_23d57569-30b0-6415-6f62-b796d3b4943c-61708a58 {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-e617dc65-398f-c680-fcab-6b72795bf81a-61708a58, #w-node-_65c8e7a2-11f6-a21b-da01-fca0ea4d61c2-61708a58, #w-node-_65c8e7a2-11f6-a21b-da01-fca0ea4d61cc-61708a58, #w-node-_67edfee9-188e-c307-6f6b-60f535c1a90f-57c88b07, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-19708a5a, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-19708a5a, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-19708a5a, #w-node-_2d525fb7-2d7b-88e1-94d3-56374b2fcccc-19708a5a, #w-node-_47d54360-176f-c4b5-8fd6-5e6b311c4508-19708a5a, #w-node-_47d54360-176f-c4b5-8fd6-5e6b311c450a-19708a5a, #w-node-_85f1af54-540f-d7af-ebc8-dc0a0b4083f0-19708a5a, #w-node-_53753e3d-5cf6-fd51-1ff8-950e0b79cad4-19708a5a, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-d1708a5b, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-d1708a5b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-d1708a5b {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_662b26a3-a750-4630-7baf-cf9b31e5b403-d1708a5b {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_662b26a3-a750-4630-7baf-cf9b31e5b455-d1708a5b {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_662b26a3-a750-4630-7baf-cf9b31e5b45b-d1708a5b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b467-d1708a5b {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_17c5517c-b98c-f4ea-58da-463c6b9b887b-d1708a5b, #w-node-_56e673ae-b10e-55dc-0db3-142bea0e1a71-d1708a5b, #w-node-_205ff0d7-25bd-a25a-0065-2a8194ba03d4-d1708a5b, #w-node-_205ff0d7-25bd-a25a-0065-2a8194ba03ee-d1708a5b, #w-node-_1cad2455-0450-bd84-a934-2c8e8570b1c7-d1708a5b, #w-node-_1cad2455-0450-bd84-a934-2c8e8570b1fe-d1708a5b, #w-node-fbeb0108-c941-d08d-9974-a664a90b3a45-d1708a5b, #w-node-cdd02e26-5418-3521-15b3-a99ea3cde59f-d1708a5b, #w-node-_53753e3d-5cf6-fd51-1ff8-950e0b79cad4-d1708a5b, #w-node-bff9bc3d-e1f7-ecb0-b744-7db952a66463-71708a6f, #w-node-a8e64fec-f980-9fc7-1192-f5b25680673c-71708a6f, #w-node-_56d6a163-6136-39e9-3fdf-418dabf1f862-71708a6f, #w-node-d6040b0a-39b9-7033-0fc5-7a5c60459f1d-71708a6f, #w-node-_1621dd6c-a2c8-a11d-cedb-5af82efefc5e-71708a6f, #w-node-f7c1e27d-62bf-bc54-9337-7c0f81b46d3b-71708a6f {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-d9d13048-eb2d-8821-c42c-c6d84ca6e5b3-71708a6f {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

#w-node-_916d54d3-fa5b-9dcd-26ab-06a9cc3c4b95-71708a6f, #w-node-_732bc27f-8b4f-e736-30f5-701a16d10682-71708a6f, #w-node-_8797bf02-249d-ead7-214c-6ca4b7e99496-71708a6f, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-ce708a70, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-ce708a70, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-ce708a70 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-eb6418a1-a893-07a2-9dec-50a4448df2b6-ce708a70 {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_6d62ae92-d1a9-a4df-e841-5d9e2f18fb6c-ce708a70 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_74e0dcdc-2e3b-5147-8717-c6b7566f1d98-ce708a70, #w-node-_74e0dcdc-2e3b-5147-8717-c6b7566f1daa-ce708a70, #w-node-_093030f9-afad-aa8f-866f-88adcf8f9b08-ce708a70 {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-d766e676-d50f-60df-7a87-73495ff60c02-ce708a70, #w-node-_126f0d83-8b25-3948-accf-9cd29138600a-ce708a70 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_711bec7c-daae-0812-dfb3-a8d5ab1bc20c-ce708a70, #w-node-_45a509c2-9418-bf99-1ac7-4b8275949994-ce708a70 {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-d0bffd03-146b-363b-6f6d-ceab788c4d2d-ce708a70 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_80695ab3-0aab-32ab-5c5d-aceea15280e2-40708a74, #w-node-_33262fb4-fefc-04da-ec5c-471ecb16c501-40708a74 {
  grid-area: 1 / 1 / 2 / 2;
}

#w-node-_5467af19-3fee-77e1-376a-16bc449ce838-b0708a7b, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-b0708a7b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-b0708a7b {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_662b26a3-a750-4630-7baf-cf9b31e5b403-b0708a7b {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-f592b7c2-3fe9-f080-ba67-f944939aeb12-b0708a7b, #w-node-_91f6beed-b29f-1c76-df4c-617ab4bc1340-b0708a7b, #w-node-f0acb943-e710-697e-f22d-12e65d5c3427-b0708a7b, #w-node-f0acb943-e710-697e-f22d-12e65d5c342f-b0708a7b {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_662b26a3-a750-4630-7baf-cf9b31e5b467-b0708a7b {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_662b26a3-a750-4630-7baf-cf9b31e5b473-b0708a7b, #w-node-d315b794-573f-6c18-c3cc-7cf54474fc24-b0708a7b, #w-node-_55d6a5d1-e5d1-c822-30a0-5df7f0f6c762-b0708a7b, #w-node-c66d6a81-99de-2538-1b3a-959d364a89c9-b0708a7b, #w-node-c66d6a81-99de-2538-1b3a-959d364a89dc-b0708a7b, #w-node-_71c4a1f4-aecb-4ffa-3479-f08444ae1bea-b0708a7b, #w-node-_71c4a1f4-aecb-4ffa-3479-f08444ae1bed-b0708a7b, #w-node-_6520db3c-7fdc-ca78-ff1d-18d385536bf9-85536bf0, #w-node-_6520db3c-7fdc-ca78-ff1d-18d385536c19-85536bf0, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69c3-61708a83, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69cb-61708a83, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69d5-61708a83 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_4f7cc533-abde-e978-1407-d5a43fe6493c-61708a83, #w-node-_7a53aea3-e987-5750-5aa4-bfcd0cf99900-61708a83, #w-node-_76cd5829-51f7-037e-6e9e-1fd29deccac8-61708a83, #w-node-_76cd5829-51f7-037e-6e9e-1fd29deccadf-61708a83, #w-node-_885c583a-70ed-3962-cb24-c2b6a97bbdf1-61708a83, #w-node-a68d8c84-1bca-ead2-ecc8-664c33b69af8-61708a83, #w-node-aa54f653-d9f0-ff9c-f345-79380a31495d-61708a83, #w-node-fbb31f67-40a9-5b42-8b29-a9612a6a70d5-61708a83, #w-node-a88c1e4a-d582-c2ab-404d-13157f344dc9-61708a83, #w-node-_2fc994fd-eaf3-6307-3b43-f712b63ff35e-61708a83, #w-node-_73faca38-1097-322a-aa3e-9df051666f52-61708a83 {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_2bafc2d6-9205-1763-5db4-ea42b475b3ff-61708a83 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_4f0a9139-e610-674f-8ff1-88eae310ac19-61708a83, #w-node-d17a926d-a0a6-2c9a-9cd0-c171410f5abe-61708a83, #w-node-e4a98196-e84e-bb9a-2ef0-c1eac035cde2-61708a83, #w-node-ac8f5a90-62aa-ed89-73ec-cc3ffb80263e-61708a83, #w-node-bb2b0a6d-c944-1dce-5539-e62f16a7dfd6-61708a83, #w-node-_36ef3b81-f417-198e-f6ac-0c3bef16dd00-61708a83, #w-node-_34d1bfa3-df2e-72a2-5cf3-7cbedc048118-61708a83 {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_54644bce-9288-3b52-a85c-9dc7da4fbd63-61708a83, #w-node-_085aa627-8f5d-a5dd-fece-e48ac1912d0f-61708a83, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-ac257527, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-ac257527, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-ac257527 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6285c9b4-2d7c-eecb-dfd4-58b68524a2e7-ac257527, #w-node-_19333299-a939-9a5c-9fc6-b38687522715-ac257527 {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_798c0865-72c0-2c77-525f-e6eb32a994ee-ac257527, #w-node-_683258fb-9471-4ff6-4c2d-0c85081c228f-ac257527, #w-node-_8f3dbaaa-60e6-0fee-f54f-fc2457b5dffc-ac257527, #w-node-_8f3dbaaa-60e6-0fee-f54f-fc2457b5e000-ac257527, #w-node-_8f3dbaaa-60e6-0fee-f54f-fc2457b5e002-ac257527, #w-node-_75b6d4b9-dfc4-5bfd-e124-d4d75cb9e4ab-ac257527, #w-node-_75b6d4b9-dfc4-5bfd-e124-d4d75cb9e4b5-ac257527, #w-node-_75b6d4b9-dfc4-5bfd-e124-d4d75cb9e4bf-ac257527, #w-node-_8be1555f-7e49-a1e1-fb6d-22177b3cba31-ac257527, #w-node-_8be1555f-7e49-a1e1-fb6d-22177b3cba3d-ac257527 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_5e04e2c0-9ffd-0b5f-1c39-074f35c961a7-ac257527 {
  grid-area: 1 / 2 / 2 / 3;
}

#w-node-_71c4a1f4-aecb-4ffa-3479-f08444ae1bea-ac257527, #w-node-_71c4a1f4-aecb-4ffa-3479-f08444ae1bed-ac257527 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (min-width: 1920px) {
  #w-node-_65c8e7a2-11f6-a21b-da01-fca0ea4d61c2-61708a58, #w-node-_65c8e7a2-11f6-a21b-da01-fca0ea4d61cc-61708a58, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-19708a5a, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-19708a5a, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-d1708a5b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-d1708a5b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-ce708a70, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-ce708a70, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-b0708a7b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-b0708a7b, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69cb-61708a83, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69d5-61708a83, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-ac257527, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-ac257527 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 991px) {
  #w-node-_80695ab3-0aab-32ab-5c5d-aceea15280e0-40708a74 {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_80695ab3-0aab-32ab-5c5d-aceea15280e2-40708a74 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_33262fb4-fefc-04da-ec5c-471ecb16c4f5-40708a74 {
    grid-area: 1 / 2 / 2 / 3;
  }

  #w-node-_33262fb4-fefc-04da-ec5c-471ecb16c501-40708a74 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 767px) {
  #w-node-ac90a9d2-31cd-abef-c71f-b25984c78aa6-61708a58, #w-node-b5f2108e-5cba-f13a-5c1e-bd0579e1f3c1-61708a58, #w-node-_23d57569-30b0-6415-6f62-b796d3b4943c-61708a58, #w-node-_65c8e7a2-11f6-a21b-da01-fca0ea4d61c2-61708a58, #w-node-_65c8e7a2-11f6-a21b-da01-fca0ea4d61cc-61708a58, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-19708a5a, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-19708a5a, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-19708a5a, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-d1708a5b, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-d1708a5b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-d1708a5b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b403-d1708a5b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b455-d1708a5b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b45b-d1708a5b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b467-d1708a5b {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-d9d13048-eb2d-8821-c42c-c6d84ca6e5b3-71708a6f {
    grid-column: span 1 / span 1;
  }

  #w-node-d9d13048-eb2d-8821-c42c-c6d84ca6e5b4-71708a6f, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-ce708a70, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-ce708a70, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-ce708a70, #w-node-eb6418a1-a893-07a2-9dec-50a4448df2b6-ce708a70, #w-node-_74e0dcdc-2e3b-5147-8717-c6b7566f1d98-ce708a70, #w-node-_74e0dcdc-2e3b-5147-8717-c6b7566f1daa-ce708a70, #w-node-_093030f9-afad-aa8f-866f-88adcf8f9b08-ce708a70, #w-node-_96ee47f9-4967-9add-385e-4499693dac8c-ce708a70, #w-node-e2eb7b93-1ab4-cc52-c908-e59f8c2a9b2c-ce708a70, #w-node-_382f1c40-ef7e-9d92-cd0e-5794ae2f142b-ce708a70, #w-node-_382f1c40-ef7e-9d92-cd0e-5794ae2f1433-ce708a70, #w-node-c3531aaa-b271-80c8-5063-9df373d79f8f-ce708a70, #w-node-c3531aaa-b271-80c8-5063-9df373d79f97-ce708a70, #w-node-_0e31763e-87e4-1c3c-b019-2580457f2b19-ce708a70, #w-node-d766e676-d50f-60df-7a87-73495ff60c02-ce708a70, #w-node-_4b73c942-370f-1beb-74e4-f7f0291ae588-ce708a70, #w-node-_126f0d83-8b25-3948-accf-9cd29138600a-ce708a70, #w-node-_711bec7c-daae-0812-dfb3-a8d5ab1bc20c-ce708a70, #w-node-_45a509c2-9418-bf99-1ac7-4b8275949994-ce708a70, #w-node-_7b71347c-e629-6588-f11d-631be993715d-40708a74, #w-node-_80695ab3-0aab-32ab-5c5d-aceea15280e0-40708a74, #w-node-_80695ab3-0aab-32ab-5c5d-aceea15280e2-40708a74, #w-node-c9441613-c5e0-ce5e-2d09-8ed4fae797f0-40708a74, #w-node-_33262fb4-fefc-04da-ec5c-471ecb16c4f5-40708a74, #w-node-_33262fb4-fefc-04da-ec5c-471ecb16c501-40708a74, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-b0708a7b, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-b0708a7b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-b0708a7b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b403-b0708a7b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b467-b0708a7b, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69c3-61708a83, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69cb-61708a83, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69d5-61708a83, #w-node-_4f7cc533-abde-e978-1407-d5a43fe6493c-61708a83, #w-node-_7a53aea3-e987-5750-5aa4-bfcd0cf99900-61708a83, #w-node-_76cd5829-51f7-037e-6e9e-1fd29deccac8-61708a83, #w-node-_76cd5829-51f7-037e-6e9e-1fd29deccadf-61708a83, #w-node-_885c583a-70ed-3962-cb24-c2b6a97bbdf1-61708a83, #w-node-a68d8c84-1bca-ead2-ecc8-664c33b69af8-61708a83, #w-node-aa54f653-d9f0-ff9c-f345-79380a31495d-61708a83, #w-node-fbb31f67-40a9-5b42-8b29-a9612a6a70d5-61708a83, #w-node-a88c1e4a-d582-c2ab-404d-13157f344dc9-61708a83, #w-node-_2fc994fd-eaf3-6307-3b43-f712b63ff35e-61708a83, #w-node-_73faca38-1097-322a-aa3e-9df051666f47-61708a83 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_73faca38-1097-322a-aa3e-9df051666f46-61708a83 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_73faca38-1097-322a-aa3e-9df051666f52-61708a83, #w-node-_73faca38-1097-322a-aa3e-9df051666f5d-61708a83 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-e07793af-f098-0455-d9f5-4a4c20c5d113-61708a83 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-_4f0a9139-e610-674f-8ff1-88eae310ac19-61708a83, #w-node-_4572f712-bbc7-fb96-73af-8d8ca4fde58d-61708a83 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-_4572f712-bbc7-fb96-73af-8d8ca4fde595-61708a83 {
    grid-area: 1 / 1 / 2 / 2;
  }

  #w-node-d17a926d-a0a6-2c9a-9cd0-c171410f5abe-61708a83, #w-node-e4a98196-e84e-bb9a-2ef0-c1eac035cde2-61708a83, #w-node-ac8f5a90-62aa-ed89-73ec-cc3ffb80263e-61708a83, #w-node-bb2b0a6d-c944-1dce-5539-e62f16a7dfd6-61708a83, #w-node-_36ef3b81-f417-198e-f6ac-0c3bef16dd00-61708a83, #w-node-_34d1bfa3-df2e-72a2-5cf3-7cbedc048118-61708a83, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-ac257527, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-ac257527, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-ac257527, #w-node-_6285c9b4-2d7c-eecb-dfd4-58b68524a2e7-ac257527, #w-node-_19333299-a939-9a5c-9fc6-b38687522715-ac257527, #w-node-_5e04e2c0-9ffd-0b5f-1c39-074f35c961a7-ac257527 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #w-node-ac90a9d2-31cd-abef-c71f-b25984c78aa6-61708a58, #w-node-b5f2108e-5cba-f13a-5c1e-bd0579e1f3c1-61708a58, #w-node-_23d57569-30b0-6415-6f62-b796d3b4943c-61708a58, #w-node-_65c8e7a2-11f6-a21b-da01-fca0ea4d61c2-61708a58, #w-node-_65c8e7a2-11f6-a21b-da01-fca0ea4d61cc-61708a58, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-19708a5a, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-19708a5a, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-19708a5a, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-d1708a5b, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-d1708a5b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-d1708a5b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b403-d1708a5b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b455-d1708a5b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b45b-d1708a5b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b467-d1708a5b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-ce708a70, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-ce708a70, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-ce708a70, #w-node-eb6418a1-a893-07a2-9dec-50a4448df2b6-ce708a70, #w-node-_74e0dcdc-2e3b-5147-8717-c6b7566f1d98-ce708a70, #w-node-_74e0dcdc-2e3b-5147-8717-c6b7566f1daa-ce708a70, #w-node-_093030f9-afad-aa8f-866f-88adcf8f9b08-ce708a70, #w-node-_96ee47f9-4967-9add-385e-4499693dac8c-ce708a70, #w-node-e2eb7b93-1ab4-cc52-c908-e59f8c2a9b2c-ce708a70, #w-node-_382f1c40-ef7e-9d92-cd0e-5794ae2f142b-ce708a70, #w-node-_382f1c40-ef7e-9d92-cd0e-5794ae2f1433-ce708a70, #w-node-c3531aaa-b271-80c8-5063-9df373d79f8f-ce708a70, #w-node-c3531aaa-b271-80c8-5063-9df373d79f97-ce708a70, #w-node-_0e31763e-87e4-1c3c-b019-2580457f2b19-ce708a70, #w-node-d766e676-d50f-60df-7a87-73495ff60c02-ce708a70, #w-node-_4b73c942-370f-1beb-74e4-f7f0291ae588-ce708a70, #w-node-_126f0d83-8b25-3948-accf-9cd29138600a-ce708a70, #w-node-_711bec7c-daae-0812-dfb3-a8d5ab1bc20c-ce708a70, #w-node-_45a509c2-9418-bf99-1ac7-4b8275949994-ce708a70, #w-node-_7b71347c-e629-6588-f11d-631be993715d-40708a74, #w-node-_80695ab3-0aab-32ab-5c5d-aceea15280e2-40708a74, #w-node-c9441613-c5e0-ce5e-2d09-8ed4fae797f0-40708a74, #w-node-_33262fb4-fefc-04da-ec5c-471ecb16c501-40708a74, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-b0708a7b, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-b0708a7b, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-b0708a7b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b403-b0708a7b, #w-node-_662b26a3-a750-4630-7baf-cf9b31e5b467-b0708a7b, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69c3-61708a83, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69cb-61708a83, #w-node-_601887c1-b733-34d7-eefb-c7444f5f69d5-61708a83, #w-node-_4f7cc533-abde-e978-1407-d5a43fe6493c-61708a83, #w-node-_7a53aea3-e987-5750-5aa4-bfcd0cf99900-61708a83, #w-node-_76cd5829-51f7-037e-6e9e-1fd29deccac8-61708a83, #w-node-_76cd5829-51f7-037e-6e9e-1fd29deccadf-61708a83, #w-node-_885c583a-70ed-3962-cb24-c2b6a97bbdf1-61708a83, #w-node-a68d8c84-1bca-ead2-ecc8-664c33b69af8-61708a83, #w-node-aa54f653-d9f0-ff9c-f345-79380a31495d-61708a83, #w-node-fbb31f67-40a9-5b42-8b29-a9612a6a70d5-61708a83, #w-node-a88c1e4a-d582-c2ab-404d-13157f344dc9-61708a83, #w-node-_2fc994fd-eaf3-6307-3b43-f712b63ff35e-61708a83, #w-node-_73faca38-1097-322a-aa3e-9df051666f47-61708a83, #w-node-_73faca38-1097-322a-aa3e-9df051666f52-61708a83, #w-node-_73faca38-1097-322a-aa3e-9df051666f5d-61708a83, #w-node-_4f0a9139-e610-674f-8ff1-88eae310ac19-61708a83, #w-node-_4572f712-bbc7-fb96-73af-8d8ca4fde58d-61708a83, #w-node-d17a926d-a0a6-2c9a-9cd0-c171410f5abe-61708a83, #w-node-e4a98196-e84e-bb9a-2ef0-c1eac035cde2-61708a83, #w-node-ac8f5a90-62aa-ed89-73ec-cc3ffb80263e-61708a83, #w-node-bb2b0a6d-c944-1dce-5539-e62f16a7dfd6-61708a83, #w-node-_36ef3b81-f417-198e-f6ac-0c3bef16dd00-61708a83, #w-node-_34d1bfa3-df2e-72a2-5cf3-7cbedc048118-61708a83, #w-node-_5467af19-3fee-77e1-376a-16bc449ce838-ac257527, #w-node-_480b4b4e-54ae-7a21-1345-3cea5c4f51a8-ac257527, #w-node-e5f6648e-3325-131f-033b-e8843bb45298-ac257527, #w-node-_6285c9b4-2d7c-eecb-dfd4-58b68524a2e7-ac257527, #w-node-_19333299-a939-9a5c-9fc6-b38687522715-ac257527, #w-node-_5e04e2c0-9ffd-0b5f-1c39-074f35c961a7-ac257527 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}


@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Bold-Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-ExtraBold-Italic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Medium-Italic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Ciutadella';
  src: url('../fonts/Emtype-Foundry---Ciutadella-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}