Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                
  <link href="css/gsap-scroll-trigger-animation-00b03f.webflow.css" rel="stylesheet" type="text/css">


  <div class="page">
    <div class="main">
      <section class="section_hero">
        <div class="container hero"></div>
      </section>
      <div class="section_horizontal">
        <div class="section_intro">
          <section class="intro_wrapper">
            <div nf-el="intro" class="container intro">
              <div bind="d848ccdd-621b-2f32-1341-0dbdce1c6d93" class="video-wrapper w-embed"><video width=100% loop muted="" autoplay="" playsinline="" loading="lazy" class="loaded">
                  <source src="https://cdn.shopify.com/videos/c/o/v/674b28349fee4671bc904c5abe1866ff.mp4" type='video/mp4'>
                </video>

                <style>
                  video {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                  }

                  .video-wrappers video {
                    object-fit: cover;
                  }
                </style>
              </div>
            </div>
          </section>
        </div>
      </div>
      <section class="section_hero">
        <div class="container hero"></div>
      </section>
    </div>
  </div>
!

CSS 

              
                .w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.w-checkbox-input--inputType-custom {
  width: 12px;
  height: 12px;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url("https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

body {
  color: #0c111c;
  letter-spacing: -0.011em;
  background-color: #f3f1eb;
  font-family: General Sans, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1 {
  letter-spacing: -0.022em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
}

h2 {
  letter-spacing: -0.022em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3.5rem;
  line-height: 1.1;
}

h3 {
  letter-spacing: -0.022em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5rem;
  line-height: 1.2;
}

h4 {
  letter-spacing: -0.021em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
  line-height: 1.2;
}

h5 {
  letter-spacing: -0.019em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  line-height: 1.3;
}

h6 {
  letter-spacing: -0.011em;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
}

p {
  margin-bottom: 0;
  font-size: 1rem;
}

a {
  text-decoration: none;
  transition: all 0.4s;
}

ul {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

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

li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-left: 0.25rem;
}

blockquote {
  border-left: 0.125rem solid #0c111c;
  margin-bottom: 0;
  padding: 0.75rem 1.25rem;
  font-size: 1.25rem;
}

.nf_hero_nav-wrapper {
  z-index: 99;
  width: 100%;
  color: #0c111c;
  background-color: rgba(250, 249, 247, 0.98);
  border-bottom: 1px solid #e9ebec;
  padding: 1rem 1.5rem;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.nf_hero_nav {
  width: 100%;
  max-width: 72rem;
  justify-content: space-between;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.nf_menu_section {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.nf_styles_wrapper {
  width: 100%;
  max-width: 72rem;
  grid-column-gap: 1.5rem;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 11.5rem 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1rem;
  padding-bottom: 0;
  display: grid;
}

.nf_menu_section-item {
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 0.95rem;
}

.nf_menu_section-link {
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  display: inline-block;
}

.nf_menu_section-link:hover {
  background-color: #e9ebec;
}

.nf_menu_section-link:focus {
  color: #165ff2;
  background-color: #e0eeff;
}

.nf_styles_aside {
  width: 100%;
  height: 100%;
  max-height: 85vh;
  grid-column-gap: 1.25rem;
  grid-row-gap: 1.25rem;
  flex-direction: column;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 5rem;
}

.nf_styles_main {
  background-color: #faf9f7;
  padding-bottom: 3rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.nf_styles_all {
  grid-row-gap: 0rem;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 0;
  display: flex;
}

.nf_menu_section-title {
  grid-column-gap: 0.25rem;
  grid-row-gap: 0.25rem;
  align-items: center;
  padding-bottom: 0.25rem;
  padding-left: 0;
  font-weight: 500;
  list-style-type: none;
  display: flex;
}

.nf_menu_icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nf_menu_icon.purple {
  color: #ab88fd;
}

.nf_menu_icon.blue {
  color: #165ff2;
}

.nf_menu_icon.orange {
  color: #ff6224;
}

.nf_menu_icon.green {
  color: #009940;
}

.nf_menu_icon.pink {
  color: #f83b6f;
}

.nf_body_start {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  border-bottom: 1.5px solid #e9ebec;
  flex-direction: column;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  display: flex;
}

.nf_body_start-heading {
  font-size: 2.5rem;
  font-weight: 600;
}

.nf_alert {
  color: #db6704;
  background-color: #fffaeb;
  border: 1.2px solid #fec74b;
  border-radius: 0.75rem;
  padding: 0.75rem 0.5rem;
  font-weight: 400;
}

.nf_alert.critical {
  color: #f04438;
  background-color: #fef3f2;
  border-color: #fdaaa4;
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
}

.nf_alert_text {
  font-size: 1rem;
}

.nf_alert_link {
  text-decoration: underline;
}

.form-check-label {
  margin-bottom: 0;
}

.form-label {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.text-size-x4 {
  letter-spacing: -0.017em;
  font-size: 1.25rem;
  line-height: 1.4;
}

.form-radio-label {
  margin-bottom: 0;
}

.text-size-x9 {
  letter-spacing: -0.022em;
  font-size: 4.5rem;
  line-height: 1;
}

.form-radio-icon {
  width: 1.125rem;
  height: 1.125rem;
  min-height: 1.125rem;
  min-width: 1.125rem;
  outline-offset: 0px;
  cursor: pointer;
  border: 0.6px solid #1c2431;
  border-radius: 100px;
  outline: 0 solid #fecdd1;
  margin-top: 0;
  margin-left: -1.125rem;
  margin-right: 0.5rem;
  transition: all 0.4s;
}

.form-radio-icon:hover {
  border-color: #0c111c;
  box-shadow: 0 1px 4px 1px rgba(0, 3, 10, 0.08);
}

.form-radio-icon.w--redirected-checked {
  background-color: #fff;
  background-image: none;
  border-width: 5px;
  border-color: #0c111c;
}

.form-radio-icon.w--redirected-focus {
  border-color: #0c111c;
  outline-width: 2px;
  margin-top: 0;
  box-shadow: 0 1px 4px 1px rgba(0, 3, 10, 0.12);
}

.form-radio-icon.w--redirected-focus-visible {
  outline-width: 2px;
  box-shadow: 0 1px 4px 1px rgba(0, 3, 10, 0.12);
}

.text-size-x7 {
  letter-spacing: -0.022em;
  font-size: 2.5rem;
  line-height: 1.2;
}

.nf_class_sample {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 15rem 1fr;
  align-items: flex-start;
  display: flex;
}

.text-size-x6 {
  letter-spacing: -0.021em;
  font-size: 2rem;
  line-height: 1.2;
}

.text-size-x1 {
  letter-spacing: -0.006em;
  font-size: 0.875rem;
  line-height: 1.5;
}

.text-size-x2 {
  letter-spacing: -0.011em;
  font-size: 1rem;
  line-height: 1.5;
}

.form-check {
  align-items: center;
  margin-bottom: 0;
  padding-left: 1.25rem;
  display: flex;
}

.text-size-x0 {
  letter-spacing: 0;
  font-size: 0.75rem;
  line-height: 1.5;
}

.form-check-icon {
  width: 1.125rem;
  height: 1.125rem;
  min-height: 1.125rem;
  min-width: 1.125rem;
  outline-offset: 0px;
  cursor: pointer;
  border: 0.6px solid #1c2431;
  border-radius: 0.25rem;
  outline: 0 solid #fecdd1;
  margin-top: 0;
  margin-left: -1.25rem;
  margin-right: 0.5rem;
  transition: all 0.4s;
}

.form-check-icon:hover {
  border-color: #0c111c;
  box-shadow: 0 1px 0.5rem 0.25rem rgba(0, 3, 10, 0.08);
}

.form-check-icon.w--redirected-checked {
  box-shadow: none;
  background-color: #0c111c;
  background-image: url("../images/icon-check.svg");
  background-size: contain;
  border-width: 1px;
  border-color: #0c111c;
}

.form-check-icon.w--redirected-focus {
  border-color: #0c111c;
  outline-width: 2px;
  box-shadow: 0 1px 4px 1px rgba(0, 3, 10, 0.12);
}

.form-check-icon.w--redirected-focus-visible {
  outline-width: 2px;
  box-shadow: 0 1px 4px 1px rgba(0, 3, 10, 0.08);
}

.text-size-x5 {
  letter-spacing: -0.019em;
  font-size: 1.5rem;
  line-height: 1.3;
}

.button {
  height: 2.5rem;
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  color: #0c111c;
  letter-spacing: -0.014em;
  background-color: #fff;
  border: 1.5px solid #fff;
  border-radius: 100rem;
  justify-content: center;
  align-items: center;
  padding: 0 1.25rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  transition: all 0.4s;
  display: flex;
}

.button:hover {
  box-shadow: 0 0 0.5rem 0.25rem rgba(0, 0, 0, 0.08);
}

.button:active {
  box-shadow: none;
}

.button.secondary {
  color: #0c111c;
  background-color: rgba(0, 0, 0, 0);
  border-width: 1.5px;
  border-color: #0c111c;
}

.button.secondary:hover,
.button.secondary:focus {
  color: #0c111c;
  border-color: #0c111c;
}

.button.tertiary {
  height: 1.75rem;
  color: #1c2431;
  letter-spacing: -0.011em;
  background-color: rgba(0, 0, 0, 0);
  border-style: none;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 1rem;
}

.button.tertiary:hover {
  box-shadow: none;
  color: #0c111c;
  border-style: none;
}

.button.tertiary:focus {
  color: #0c111c;
  border-color: #0c111c;
}

.button.tertiary.size-small {
  height: 1.5rem;
  grid-column-gap: 0.25rem;
  grid-row-gap: 0.25rem;
  letter-spacing: -0.006em;
  font-size: 0.875rem;
}

.button.size-small {
  height: 2rem;
  letter-spacing: -0.011em;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
}

.nf_placeholder_form {
  grid-column-gap: 3rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  display: flex;
}

.nf_placeholder_swatch {
  height: 100%;
  min-height: 2.5rem;
  grid-column-gap: 0.25rem;
  grid-row-gap: 0.25rem;
  border-radius: 0.25rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
}

.nf_placeholder_swatch.base400 {
  background-color: #9ca3af;
}

.nf_placeholder_swatch.suc500 {
  background-color: #1ad275;
}

.nf_placeholder_swatch.suc200 {
  background-color: #b8fad7;
}

.nf_placeholder_swatch.sec600 {
  color: #fff;
  background-color: #e11d3f;
}

.nf_placeholder_swatch.war400 {
  background-color: #fdb022;
}

.nf_placeholder_swatch.base800 {
  color: #fff;
  background-color: #1c2431;
}

.nf_placeholder_swatch.suc600 {
  background-color: #0faa5c;
}

.nf_placeholder_swatch.prim100 {
  background-color: #e0eeff;
}

.nf_placeholder_swatch.war500 {
  background-color: #f78e09;
}

.nf_placeholder_swatch.war300 {
  background-color: #fec74b;
}

.nf_placeholder_swatch.prim50 {
  background-color: #f2f5fd;
}

.nf_placeholder_swatch.bas700 {
  color: #fff;
  background-color: #374151;
}

.nf_placeholder_swatch.err200 {
  background-color: #ffcdc9;
}

.nf_placeholder_swatch.err600 {
  color: #fff;
  background-color: #de3024;
}

.nf_placeholder_swatch.base100 {
  background-color: #f6f7f8;
}

.nf_placeholder_swatch.war800 {
  color: #fff;
  background-color: #93360d;
}

.nf_placeholder_swatch.war900 {
  color: #fff;
  background-color: #792d0e;
}

.nf_placeholder_swatch.suc700 {
  color: #fff;
  background-color: #0f864b;
}

.nf_placeholder_swatch.sec500 {
  color: #fff;
  background-color: #f43f56;
}

.nf_placeholder_swatch.prim600 {
  color: #fff;
  background-color: #165ff2;
  position: relative;
}

.nf_placeholder_swatch.base300 {
  background-color: #d1d5db;
}

.nf_placeholder_swatch.err50 {
  background-color: #fef3f2;
}

.nf_placeholder_swatch.suc300 {
  background-color: #80f5b9;
}

.nf_placeholder_swatch.sec200 {
  background-color: #fecdd1;
}

.nf_placeholder_swatch.err400 {
  background-color: #f97970;
}

.nf_placeholder_swatch.war100 {
  background-color: #ffefc6;
}

.nf_placeholder_swatch.sec-300 {
  background-color: #fda4ab;
}

.nf_placeholder_swatch.sec400 {
  background-color: #fb717f;
}

.nf_placeholder_swatch.war50 {
  background-color: #fffaeb;
}

.nf_placeholder_swatch.err500 {
  background-color: #f04438;
}

.nf_placeholder_swatch.base200 {
  background-color: #eeeff2;
}

.nf_placeholder_swatch.prim700 {
  color: #fff;
  background-color: #0f3699;
}

.nf_placeholder_swatch.suc50 {
  background-color: #effef6;
}

.nf_placeholder_swatch.prim900 {
  color: #fff;
  background-color: #021031;
}

.nf_placeholder_swatch.war200 {
  background-color: #fedf89;
}

.nf_placeholder_swatch.sec50 {
  background-color: #fff1f1;
}

.nf_placeholder_swatch.err100 {
  background-color: #fee4e2;
}

.nf_placeholder_swatch.war700 {
  color: #fff;
  background-color: #b64607;
}

.nf_placeholder_swatch.prim300 {
  background-color: #8fc7ff;
}

.nf_placeholder_swatch.suc800 {
  color: #fff;
  background-color: #12693e;
}

.nf_placeholder_swatch.sec700 {
  color: #fff;
  background-color: #be1234;
}

.nf_placeholder_swatch.err800 {
  color: #fff;
  background-color: #9a221a;
}

.nf_placeholder_swatch.sec900 {
  color: #fff;
  background-color: #881332;
}

.nf_placeholder_swatch.sec100 {
  background-color: #ffe4e5;
}

.nf_placeholder_swatch.err900 {
  color: #fff;
  background-color: #80231c;
}

.nf_placeholder_swatch.base50 {
  background-color: #fff;
}

.nf_placeholder_swatch.suc900 {
  color: #fff;
  background-color: #115635;
}

.nf_placeholder_swatch.base600 {
  color: #fff;
  background-color: #4b5563;
}

.nf_placeholder_swatch.err700 {
  color: #fff;
  background-color: #bb241a;
}

.nf_placeholder_swatch.prim200 {
  background-color: #c2dfff;
}

.nf_placeholder_swatch.prim500 {
  background-color: #3484fd;
}

.nf_placeholder_swatch.base500 {
  color: #fff;
  background-color: #6b7280;
}

.nf_placeholder_swatch.suc100 {
  background-color: #dafeeb;
}

.nf_placeholder_swatch.prim400 {
  background-color: #5aa7ff;
}

.nf_placeholder_swatch.sec800 {
  color: #fff;
  background-color: #9f1233;
}

.nf_placeholder_swatch.err300 {
  background-color: #fdaaa4;
}

.nf_placeholder_swatch.war600 {
  background-color: #db6704;
}

.nf_placeholder_swatch.prim800 {
  color: #fff;
  background-color: #051d4d;
}

.nf_placeholder_swatch.suc400 {
  background-color: #42e693;
}

.nf_placeholder_swatch.base900 {
  color: #fff;
  background-color: #0c111c;
}

.nf_class_group-wrapper {
  width: 100%;
  grid-column-gap: 1.5rem;
  grid-row-gap: 0rem;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.4s;
  display: flex;
}

.nf_class_group-description {
  color: #6b7280;
  font-size: 0.85rem;
  font-weight: 400;
}

.nf_class_group {
  grid-column-gap: 0.25rem;
  grid-row-gap: 0.25rem;
  background-color: rgba(0, 0, 0, 0);
  flex-direction: column;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0;
  display: flex;
}

.nf_class_list {
  width: 100%;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  flex-flow: column wrap;
  align-content: flex-start;
  padding: 0.75rem 0;
  display: flex;
}

.nf_class_list.colors {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.nf_class_list.horizontal {
  flex-direction: row;
  align-items: center;
}

.nf_class_list.horizontal.bg-colors {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
}

.nf_class_list.block {
  display: block;
}

.text-size-x3 {
  letter-spacing: -0.014em;
  font-size: 1.125rem;
  line-height: 1.4;
}

.text-size-x8 {
  letter-spacing: -0.022em;
  font-size: 3.5rem;
  line-height: 1.1;
}

.form-input {
  height: auto;
  min-height: 2.75rem;
  outline-offset: 0px;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #eeeff2;
  border-radius: 0.5rem;
  outline: 0 solid #fecdd1;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  transition: all 0.4s;
}

.form-input:hover {
  border-color: #9ca3af;
  box-shadow: 0 0 0.5rem 0.125rem rgba(0, 0, 0, 0.05);
}

.form-input:active {
  box-shadow: none;
  border-color: #6b7280;
}

.form-input:focus {
  outline-offset: 0px;
  border-color: #6b7280;
  outline-width: 2px;
  outline-style: solid;
}

.form-input::-ms-input-placeholder {
  color: #d1d5db;
}

.form-input::placeholder {
  color: #d1d5db;
}

.form-input.area {
  min-height: 7.5rem;
}

.form-radio {
  align-items: center;
  margin-bottom: 0;
  padding-left: 1.125rem;
  display: flex;
}

.nf_class_group-title {
  border-bottom: 1px solid #eeeff2;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.125rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.nf_body_text_heading-wrap {
  padding-top: 5rem;
  padding-bottom: 0.5rem;
}

.nf_body_text_heading {
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 500;
}

.nf_body_text_subheading {
  background-color: #f5f4f2;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  padding-left: 0.125rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.nf_body_text_subheading-tag {
  opacity: 0;
  color: #bbbfc4;
  transition-duration: 0.3s;
}

.main {
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: 90rem;
  grid-row-gap: 1.5rem;
  flex-flow: wrap;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
}

.container.hero {
  height: 100%;
  justify-content: center;
  align-items: flex-end;
}

.container.intro {
  height: 100%;
  max-width: none;
  background-color: #fff;
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 3rem;
  transition: all 0.4s;
  transform: scale(0.9);
}

.col-d-8 {
  max-width: 66.666%;
  flex: 0 66.666%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-7 {
  max-width: 58.333%;
  flex: 0 58.333%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-5 {
  max-width: 41.666%;
  flex: 0 41.666%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-6 {
  max-width: 50%;
  flex: 0 50%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-2 {
  max-width: 16.666%;
  flex: 0 16.666%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-4 {
  max-width: 33.333%;
  flex: 0 33.333%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-11 {
  max-width: 91.666%;
  flex: 0 91.66%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-10 {
  max-width: 83.333%;
  flex: 0 83.3333%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.nf_placeholder_column {
  width: 100%;
  height: 2rem;
  text-align: center;
  border: 1.5px dashed #d1d5db;
  border-radius: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.7rem;
  display: flex;
}

.col-d-1 {
  max-width: 8.33%;
  flex: 0 8.33%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-3 {
  max-width: 25%;
  flex: 0 25%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-12 {
  max-width: 100%;
  flex: 0 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.col-d-9 {
  max-width: 75%;
  flex: 0 75%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.v-0 {
  grid-row-gap: 0rem;
  flex-direction: column;
  display: flex;
}

.v-4 {
  grid-row-gap: 0.25rem;
  flex-direction: column;
  display: flex;
}

.v-8 {
  grid-row-gap: 0.5rem;
  flex-direction: column;
  display: flex;
}

.v-12 {
  grid-row-gap: 0.75rem;
  flex-direction: column;
  display: flex;
}

.v-20 {
  grid-row-gap: 1.25rem;
  flex-direction: column;
  display: flex;
}

.v-24 {
  grid-row-gap: 1.5rem;
  flex-direction: column;
  display: flex;
}

.v-32 {
  grid-row-gap: 2rem;
  flex-direction: column;
  display: flex;
}

.v-16 {
  grid-row-gap: 1rem;
  flex-direction: column;
  display: flex;
}

.v-48 {
  grid-row-gap: 3rem;
  flex-direction: column;
  display: flex;
}

.v-80 {
  grid-row-gap: 5rem;
  flex-direction: column;
  display: flex;
}

.v-104 {
  grid-row-gap: 6.5rem;
  flex-direction: column;
  display: flex;
}

.v-40 {
  grid-row-gap: 2.5rem;
  flex-direction: column;
  display: flex;
}

.v-64 {
  grid-row-gap: 4rem;
  flex-direction: column;
  display: flex;
}

.v-120 {
  grid-row-gap: 7.5rem;
  flex-direction: column;
  display: flex;
}

.h-0 {
  grid-column-gap: 0rem;
  display: flex;
}

.h-8 {
  grid-column-gap: 0.5rem;
  display: flex;
}

.h-4 {
  grid-column-gap: 0.25rem;
  display: flex;
}

.h-12 {
  grid-column-gap: 0.75rem;
  display: flex;
}

.h-16 {
  grid-column-gap: 1rem;
  display: flex;
}

.h-20 {
  grid-column-gap: 1.25rem;
  display: flex;
}

.h-24 {
  grid-column-gap: 1.5rem;
  display: flex;
}

.h-32 {
  grid-column-gap: 2rem;
  display: flex;
}

.h-40 {
  grid-column-gap: 2.5rem;
  display: flex;
}

.h-48 {
  grid-column-gap: 3rem;
  display: flex;
}

.h-64 {
  grid-column-gap: 4rem;
  display: flex;
}

.h-80 {
  grid-column-gap: 5rem;
  display: flex;
}

.nf_placeholder_space-label {
  border: 1px solid #9ca3af;
  align-items: center;
  margin: 0.45rem;
  padding: 0.2rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.nf_placeholder_space-wrapper {
  width: 100%;
  border: 1px dashed #d1d5db;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.25rem;
  display: inline-block;
}

.p-8 {
  padding: 0.5rem;
}

.p-0 {
  padding: 0;
}

.p-4 {
  padding: 0.25rem;
}

.p-12 {
  padding: 0.75rem;
}

.p-16 {
  padding: 1rem;
}

.p-20 {
  padding: 1.25rem;
}

.p-24 {
  padding: 1.5rem;
}

.p-28 {
  padding: 1.75rem;
}

.p-32 {
  padding: 2rem;
}

.p-36,
.p-40,
.p-44 {
  padding: 2.25rem;
}

.p-48 {
  padding: 3rem;
}

.p-52 {
  padding: 3.25rem;
}

.p-56 {
  padding: 3.5rem;
}

.p-60 {
  padding: 3.75rem;
}

.p-64 {
  padding: 4rem;
}

.p-68 {
  padding: 4.25rem;
}

.p-72 {
  padding: 4.5rem;
}

.p-76 {
  padding: 4.75rem;
}

.p-80 {
  padding: 5rem;
}

.p-88 {
  padding: 5.5rem;
}

.p-96 {
  padding: 6rem;
}

.p-104 {
  padding: 6.5rem;
}

.p-112 {
  padding: 7rem;
}

.p-120 {
  padding: 7.5rem;
}

.p-left {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}

.p-top {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.p-vertical {
  padding-left: 0;
  padding-right: 0;
}

.p-right {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.p-bottom {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.p-horizontal {
  padding-top: 0;
  padding-bottom: 0;
}

.margin-auto {
  margin-left: auto;
  margin-right: auto;
}

.bg-prim-600 {
  background-color: #165ff2;
}

.bg-base-50 {
  background-color: #fff;
}

.nf_placeholder_swatch-label {
  margin: 2.5rem 2.5rem 0.5rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.nf_placeholder_swatch-label.white {
  color: #fff;
}

.bg-base-100 {
  background-color: #f6f7f8;
}

.bg-base-800 {
  background-color: #1c2431;
}

.bg-prim-50 {
  background-color: #f2f5fd;
}

.bg-base-900 {
  background-color: #0c111c;
}

.bg-prim-800 {
  background-color: #051d4d;
}

.bg-prim-900 {
  background-color: #021031;
}

.bg-prim-100 {
  background-color: #e0eeff;
}

.icon-8 {
  height: 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-16 {
  height: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-20 {
  height: 1.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-24 {
  height: 1.5rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-32 {
  height: 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-4 {
  height: 0.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-12 {
  height: 0.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-40 {
  height: 2.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-4x4 {
  width: 0.25rem;
  height: 0.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-8x8 {
  width: 0.5rem;
  height: 0.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-12x12 {
  width: 0.75rem;
  height: 0.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-16x16 {
  width: 1rem;
  height: 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-20x20 {
  width: 1.25rem;
  height: 1.25rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-24x24 {
  width: 1.5rem;
  height: 1.5rem;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-32x32 {
  width: 2rem;
  height: 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-40x40 {
  width: 2.5rem;
  height: 2.5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-xs {
  height: 0.5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-s {
  height: 0.85em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-m {
  height: 1em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-l {
  height: 1.25em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-xl {
  height: 1.5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-xs-xs {
  width: 0.5em;
  height: 0.5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-s-s {
  width: 0.85em;
  height: 0.85em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-m-m {
  width: 1em;
  height: 1em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-l-l {
  width: 1.25em;
  height: 1.25em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-xl-xl {
  width: 1.5em;
  height: 1.5em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nf_placeholder_ratio {
  width: 5rem;
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 15rem 1fr;
  align-items: flex-start;
  display: flex;
}

.ratio-1-1 {
  width: 100%;
  padding-top: 100%;
  position: relative;
}

.nf_placeholder_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.ratio-4-3 {
  width: 100%;
  padding-top: 75%;
  position: relative;
}

.ratio-3-2 {
  width: 100%;
  padding-top: 66.66%;
  position: relative;
}

.ratio-16-9 {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}

.ratio-3-4 {
  width: 100%;
  padding-top: 133.33%;
  position: relative;
}

.ratio-2-3 {
  width: 100%;
  padding-top: 150%;
  position: relative;
}

.ratio-9-16 {
  width: 100%;
  padding-top: 177.77%;
  position: relative;
}

.text-color-prim-900 {
  color: #021031;
}

.text-color-base-900 {
  color: #0c111c;
}

.text-color-prim-300 {
  color: #8fc7ff;
}

.text-color-base-50 {
  color: #fff;
}

.text-color-prim-600 {
  color: #165ff2;
}

.text-color-base-100 {
  color: #f6f7f8;
}

.text-color-base-300 {
  color: #d1d5db;
}

.text-color-prim-100 {
  color: #e0eeff;
}

.text-color-base-800 {
  color: #1c2431;
}

.text-color-base-500 {
  color: #6b7280;
}

.text-color-base-200 {
  color: #eeeff2;
}

.text-color-base-400 {
  color: #9ca3af;
}

.text-color-prim-200 {
  color: #c2dfff;
}

.text-color-prim-700 {
  color: #0f3699;
}

.text-color-base-700 {
  color: #374151;
}

.text-color-prim-50 {
  color: #f2f5fd;
}

.text-color-prim-400 {
  color: #5aa7ff;
}

.text-color-base-600 {
  color: #4b5563;
}

.text-color-prim-800 {
  color: #051d4d;
}

.text-color-prim-500 {
  color: #3484fd;
}

.text-weight-light {
  font-weight: 300;
}

.text-weight-normal {
  font-weight: 400;
}

.text-weight-medium {
  font-weight: 500;
}

.text-weight-semibold {
  font-weight: 600;
}

.text-weight-bold {
  font-weight: 700;
}

.text-align-d-left {
  text-align: left;
}

.text-align-d-right {
  text-align: right;
}

.text-align-d-center {
  text-align: center;
}

.text-line-xl {
  line-height: 2;
}

.text-line-l {
  line-height: 1.7;
}

.text-line-m {
  line-height: 1.5;
}

.text-line-s {
  line-height: 1.3;
}

.text-line-xs {
  line-height: 1.2;
}

.text-line-none {
  line-height: 1;
}

.text-space-xlarge {
  letter-spacing: 0.05em;
}

.text-space-large {
  letter-spacing: 0.025em;
}

.text-space-base {
  letter-spacing: 0;
}

.text-space-small {
  letter-spacing: -0.015em;
}

.text-space-xsmall {
  letter-spacing: -0.03em;
}

.text-style-italic {
  font-style: italic;
}

.text-style-underline {
  text-decoration: underline;
}

.text-style-deco-none {
  text-decoration: none;
}

.text-style-allcaps {
  text-transform: uppercase;
}

.text-style-capitalized {
  text-transform: capitalize;
}

.text-style-lowercase {
  text-transform: lowercase;
}

.flex-direction-v {
  flex-direction: column;
  display: flex;
}

.flex-direction-h {
  flex-direction: row;
  display: flex;
}

.flex-align-start {
  align-items: flex-start;
  display: flex;
}

.flex-align-center {
  align-items: center;
  display: flex;
}

.flex-align-end {
  align-items: flex-end;
  display: flex;
}

.flex-align-stretch {
  align-items: stretch;
  display: flex;
}

.flex-justify-start {
  justify-content: flex-start;
  display: flex;
}

.flex-justify-center {
  justify-content: center;
  display: flex;
}

.flex-justify-end {
  justify-content: flex-end;
  display: flex;
}

.flex-justify-around {
  justify-content: space-around;
  display: flex;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-hidden {
  overflow: hidden;
}

.transition-250 {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-150 {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.hide {
  display: none;
}

.transition-400 {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-800 {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.v-28 {
  grid-row-gap: 1.75rem;
  flex-direction: column;
  display: flex;
}

.v-36 {
  grid-row-gap: 2.25rem;
  flex-direction: column;
  display: flex;
}

.v-44 {
  grid-row-gap: 2.75rem;
  flex-direction: column;
  display: flex;
}

.v-52 {
  grid-row-gap: 3.25rem;
  flex-direction: column;
  display: flex;
}

.v-56 {
  grid-row-gap: 3.5rem;
  flex-direction: column;
  display: flex;
}

.v-60 {
  grid-row-gap: 3.75rem;
  flex-direction: column;
  display: flex;
}

.v-68 {
  grid-row-gap: 4.25rem;
  flex-direction: column;
  display: flex;
}

.v-72 {
  grid-row-gap: 4.5rem;
  flex-direction: column;
  display: flex;
}

.v-76 {
  grid-row-gap: 4.75rem;
  flex-direction: column;
  display: flex;
}

.v-88 {
  grid-row-gap: 5.5rem;
  flex-direction: column;
  display: flex;
}

.v-96 {
  grid-row-gap: 6rem;
  flex-direction: column;
  display: flex;
}

.v-112 {
  grid-row-gap: 7rem;
  flex-direction: column;
  display: flex;
}

.h-28 {
  grid-column-gap: 1.75rem;
  display: flex;
}

.h-36 {
  grid-column-gap: 2.25rem;
  display: flex;
}

.h-44 {
  grid-column-gap: 2.75rem;
  display: flex;
}

.h-52 {
  grid-column-gap: 3.25rem;
  display: flex;
}

.h-56 {
  grid-column-gap: 3.5rem;
  display: flex;
}

.h-60 {
  grid-column-gap: 3.75rem;
  display: flex;
}

.h-68 {
  grid-column-gap: 4.25rem;
  display: flex;
}

.h-72 {
  grid-column-gap: 4.5rem;
  display: flex;
}

.h-76 {
  grid-column-gap: 4.75rem;
  display: flex;
}

.h-88 {
  grid-column-gap: 5.5rem;
  display: flex;
}

.h-96 {
  grid-column-gap: 6rem;
  display: flex;
}

.h-104 {
  grid-column-gap: 6.5rem;
  display: flex;
}

.h-112 {
  grid-column-gap: 7rem;
  display: flex;
}

.h-120 {
  grid-column-gap: 7.5rem;
  display: flex;
}

.nf_body_text_wrapper {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0.25rem;
  padding-bottom: 2rem;
  display: flex;
}

.nf_body_cta_link {
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
  color: #165ff2;
  background-color: #f2f5fd;
  border: 1px solid #c2dfff;
  border-radius: 0.25rem;
  justify-content: center;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  line-height: 1;
  display: flex;
}

.nf_body_cta_link.figma {
  color: #a259ff;
  background-color: #f6f0ff;
  border-color: #e2ccff;
}

.nf_body_cta_link.disabled {
  color: #d7d9db;
  cursor: not-allowed;
  background-color: #f4f4f4;
  border-color: #d7d9db;
}

.nf_body_cta_link.docs {
  color: #0c111c;
  background-color: #eeeff2;
  border-color: #d1d5db;
}

.nf_body_cta_wrapper {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  display: flex;
}

.nf_version {
  color: #4b5563;
  font-weight: 500;
}

.nf_placeholder_container {
  width: 100%;
  min-height: 4rem;
  min-width: 5rem;
  text-align: center;
  border: 1px dashed #d1d5db;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-weight: 500;
  display: flex;
}

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

.utility-page_content {
  width: 20rem;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: center;
  flex-direction: column;
  display: flex;
}

.utility-page_form {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.utility-page_img {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

.utility-page_form-fields {
  text-align: left;
}

.section_hero {
  height: 100vh;
  position: relative;
}

.hero_bg-img {
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.navbar_wrapper {
  z-index: 99;
  width: 100%;
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  background-color: rgba(0, 0, 0, 0);
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.navbar_brand-wrapper {
  margin-right: auto;
}

.navbar_container {
  width: 100%;
  max-width: 90rem;
  color: #fff;
  justify-content: center;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  display: flex;
}

.text-custom-hero {
  color: #fff1ad;
  margin-bottom: 2rem;
  font-family: cobya, sans-serif;
  font-size: 22rem;
  font-weight: 800;
}

.section_intro {
  width: 100vw;
  height: 200vh;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.intro_left {
  height: 100%;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
}

.section_chapter {
  width: 100vw;
  background-color: #f3f1eb;
  flex: none;
  padding-top: 100vh;
  padding-bottom: 12rem;
}

.ratio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  border-radius: 1rem;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.chapter_divider {
  width: 80%;
  height: 1px;
  background-color: #9ca3af;
  margin-left: auto;
  margin-right: auto;
}

.ff-cobya {
  font-family: cobya, sans-serif;
}

.text-color-custom-yellow {
  color: #ffc727;
}

.section_horizontal {
  display: flex;
}

.intro_wrapper {
  width: 100%;
  height: 100vh;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.chapter_text {
  max-width: 84ch;
  margin-left: auto;
  margin-right: auto;
}

.body {
  background-color: #1c2431;
}

@media screen and (max-width: 991px) {
  .nf_styles_wrapper {
    padding-top: 2rem;
  }

  .nf_styles_aside {
    grid-row-gap: 0.25rem;
  }

  .nf_body_start {
    padding-top: 1.5rem;
  }

  .nf_class_group-wrapper,
  .nf_class_list {
    width: 100%;
  }

  .nf_class_list.colors {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .container {
    grid-row-gap: 1rem;
  }

  .container.intro {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .col-d-8,
  .col-d-7,
  .col-d-5,
  .col-d-6,
  .col-d-2,
  .col-d-4,
  .col-d-11,
  .col-d-10 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .nf_placeholder_column {
    flex-direction: column;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .col-d-1,
  .col-d-3,
  .col-d-12,
  .col-d-9 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-8 {
    max-width: 66.666%;
    flex: 0 66.666%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-12 {
    max-width: 100%;
    flex: 0 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-1 {
    max-width: 8.333%;
    flex: 0 8.333%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-2 {
    max-width: 16.666%;
    flex: 0 16.666%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-9 {
    max-width: 75%;
    flex: 0 75%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-6 {
    max-width: 50%;
    flex: 0 50%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-5 {
    max-width: 41.666%;
    flex: 0 41.666%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-3 {
    max-width: 25%;
    flex: 0 25%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-11 {
    max-width: 91.666%;
    flex: 0 91.66%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-4 {
    max-width: 33.333%;
    flex: 0 33.333%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-10 {
    max-width: 83.333%;
    flex: 0 83.333%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .col-t-7 {
    max-width: 58.333%;
    flex: 0 58.333%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .text-align-t-center {
    text-align: center;
  }

  .text-align-t-right {
    text-align: right;
  }

  .text-align-t-left {
    text-align: left;
  }

  .hide-t {
    display: none;
  }

  .text-custom-hero {
    font-size: 15rem;
  }

  .intro_wrapper {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .nf_hero_nav-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nf_hero_copy {
    font-size: 1.125rem;
  }

  .nf_styles_wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    grid-template-columns: 1fr;
  }

  .nf_styles_aside {
    max-height: 14rem;
    background-color: #f7f6f4;
    padding: 0.5rem;
    position: static;
  }

  .nf_styles_main {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nf_body_start {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }

  .nf_class_list {
    width: 100%;
  }

  .container {
    grid-row-gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .col-d-8,
  .col-d-7,
  .col-d-5,
  .col-d-6,
  .col-d-2,
  .col-d-4,
  .col-d-11,
  .col-d-10 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .nf_placeholder_column {
    padding-left: 0;
    padding-right: 0;
  }

  .col-d-1,
  .col-d-3,
  .col-d-12,
  .col-d-9,
  .col-t-8,
  .col-t-12,
  .col-t-1,
  .col-t-2,
  .col-t-9,
  .col-t-6,
  .col-t-5,
  .col-t-3,
  .col-t-11,
  .col-t-4,
  .col-t-10,
  .col-t-7 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-6 {
    max-width: 50%;
    flex: 0 50%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-3 {
    max-width: 25%;
    flex: 0 25%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-8 {
    max-width: 66.666%;
    flex: 0 66.666%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-4 {
    max-width: 33.333%;
    flex: 0 33.333%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-10 {
    max-width: 83.333%;
    flex: 0 83.333%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-12 {
    max-width: 100%;
    flex: 0 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-11 {
    max-width: 91.666%;
    flex: 0 91.666%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-7 {
    max-width: 58.333%;
    flex: 0 58.333%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-5 {
    max-width: 41.666%;
    flex: 0 41.666%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-1 {
    max-width: 8.333%;
    flex: 0 8.333%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-2 {
    max-width: 16.666%;
    flex: 0 16.666%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-ml-9 {
    max-width: 75%;
    flex: 0 75%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .hide-ml {
    display: none;
  }

  .text-align-lm-left {
    text-align: left;
  }

  .text-align-lm-center {
    text-align: center;
  }

  .text-align-lm-right {
    text-align: right;
  }

  .navbar_container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .text-custom-hero {
    font-size: 12rem;
  }

  .section_intro {
    height: auto;
    min-height: 100vh;
    align-items: stretch;
  }

  .section_chapter {
    padding-top: 8rem;
  }

  .section_horizontal {
    flex-wrap: wrap;
  }

  .intro_wrapper {
    height: auto;
    min-height: 100vh;
    align-items: stretch;
  }

  .chapter_text {
    max-width: 72ch;
  }
}

@media screen and (max-width: 479px) {
  .nf_hero_copy {
    font-size: 1rem;
  }

  .nf_styles_main {
    overflow: hidden;
  }

  .nf_class_list.colors {
    grid-template-columns: 1fr 1fr;
  }

  .container.intro {
    border-radius: 2rem;
    padding: 1.5rem;
  }

  .col-m-9 {
    max-width: 75%;
    flex: 0 75%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-3 {
    max-width: 25%;
    flex: 0 25%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-4 {
    max-width: 33.333%;
    flex: 0 33.333%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-1 {
    max-width: 8.333%;
    flex: 0 8.333%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-12 {
    max-width: 100%;
    flex: 0 100%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-10 {
    max-width: 83.333%;
    flex: 0 83.333%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-6 {
    max-width: 50%;
    flex: 0 50%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-5 {
    max-width: 41.666%;
    flex: 0 41.666%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-2 {
    max-width: 16.666%;
    flex: 0 16.666%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-11 {
    max-width: 91.666%;
    flex: 0 91.666%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-8 {
    max-width: 66.666%;
    flex: 0 66.666%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .col-m-7 {
    max-width: 58.333%;
    flex: 0 58.333%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .text-align-m-left {
    text-align: left;
  }

  .text-align-m-right {
    text-align: right;
  }

  .text-align-m-center {
    text-align: center;
  }

  .hide-m {
    display: none;
  }

  .section_intro,
  .intro_wrapper {
    align-items: stretch;
  }

  .chapter_text {
    max-width: 60ch;
    font-size: 1.25rem;
  }
}

#w-node-_110ce21e-3414-852e-2554-5a1e20ea32a4-4a9e73dd,
#w-node-_110ce21e-3414-852e-2554-5a1e20ea32a8-4a9e73dd,
#w-node-_110ce21e-3414-852e-2554-5a1e20ea32ac-4a9e73dd,
#w-node-_110ce21e-3414-852e-2554-5a1e20ea32b0-4a9e73dd,
#w-node-cf2bd130-f0aa-1925-abda-4e944de1eddf-4a9e73dd,
#w-node-cf2bd130-f0aa-1925-abda-4e944de1ede3-4a9e73dd,
#w-node-cf2bd130-f0aa-1925-abda-4e944de1ede7-4a9e73dd,
#w-node-cf2bd130-f0aa-1925-abda-4e944de1edeb-4a9e73dd {
  grid-area: span 1 / span 12 / span 1 / span 12;
}

@media screen and (max-width: 767px) {
  #w-node-_1989b0eb-baed-08e4-7af2-079dafd29d51-4a9e73dd {
    grid-area: 2 / 1 / 3 / 2;
  }
}

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "cobya";
  src: url("../fonts/Cobya-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "cobya";
  src: url("../fonts/Cobya-ExtraboldExpanded.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "cobya";
  src: url("../fonts/Cobya-SemiboldExpanded.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
!

JS 

              
                console.clear(); // Start with a clean console on refesh
ScrollTrigger.defaults({
  markers: true
});

const tl = gsap.timeline({ paused: true });

tl.to(".intro", {
  duration: 0.3,
  scale: 1,
  ease: "none"
});

function onVideoHasEnded() {
  gsap.to(tl, {
    time: 0,
    duration: 0.3,
    ease: "power4.inOut"
    // yoyo: true, // yoyo needs at least a repeat of 1
    // defaults: {
    // yoyoEase: true
    // missing } defaults:{ does not get closed properly
  });
}

ScrollTrigger.create({
  trigger: ".intro",
  start: "top top+=100px",
  end: "center top",
  // toggleActions: "play none none none",
  onEnter: () => {
    return gsap.to(tl, {
      time: tl.duration(),
      duration: 0.3,
      ease: "power4.inOut"
    });
  },
  onLeave: () => onVideoHasEnded()
  // scrub: true
});
!
999px

Console