.layout-landing {
  --bg-color--body: #FFFFFF;
  --button--bg-color: #117B5E;
  --button--bg-color--hover: #0d5f49;
  --button--radius: 30px;
  --font--banner--size: clamp(3.75rem, 8.929vw - 0.536rem, 7.5rem);
  --font--banner--mobile-size: clamp(2.625rem, 4.58vw + 1.552rem, 3.75rem);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  body,
  div,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  a,
  ul,
  li,
  .article-card--read-more > span {
    font-family: 'Archivo SemiCondensed' !important;
  }

  .featured-grid--header-nav:empty {
    display: none;
  }

  @media only screen and (min-width: 768px) {
    [data-section-id][data-container-width="5"] > * {
      width: var(--max-width--x-large);
    }
  }

  [data-container="panel"] {
    grid-column-gap: 18px;
  }

  .section--header {
    [data-background-color="none"] {
      background-color: #F5FBFF;
    }

    .header--wrapper {
      --header-layout: "logo secondary-nav" / minmax(0, 1fr) minmax(0, 1fr) !important;

      padding-block: var(--spacing--3);
      align-items: center;
    }

    .header--primary-nav {
      width: 40vw;
      display: block;
    }

    .header--button {
      min-width: 170px;
      height: 35px;
      padding-bottom: 2px;
      font-weight: 700;
      font-size: 15px;
      line-height: 1.1;
      letter-spacing: -0.02em;
      text-transform: capitalize;
    }

    @media only screen and (min-width: 768px) {
      .x-menu {
        width: 100%;
        display: block;

        .x-menu--level-1--container {
          justify-content: space-between;
        }

        .x-menu--level-1--link {
          .x-menu--level-1--text {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.17em;

            &::after {
              display: none;
            }
          }
        }
      }
    }

    @media only screen and (max-width: 767px) {
      .header--wrapper {
        padding-block: var(--spacing--2);
      }

      .header--logo {
        grid-area: primary-nav;
      }

      .header--button {
        min-width: 100px;
      }
    }
  }

  .section--image-with-text {
    .stacked-text--root {
      [data-item="banner-heading"] {
        font-weight: 900;
        line-height: 0.92;
        text-transform: uppercase;
      }

      .stacked-text--description {
        margin-bottom: 24px;
        line-height: 1.1;
      }

      .stacked-text--button {
        border-radius: 30px;
        background-color: var(--button--bg-color);
        color: #fff;
        transition-property: color, border-color, background-color;
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition-delay: 0ms !important;

        span {
          height: 50px;
          padding-block-end: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          letter-spacing: 0;

          &::after {
            display: none;
          }
        }

        &:hover {
          background-color: var(--button--bg-color--hover);
        }
      }
    }

    .featured-content--root[data-text-position="overlay"] {
      .stacked-text--root {
        width: 100%;
        max-width: calc(964px + calc(var(--spacing--section--x) * 2));

        .stacked-text--wrapper {
          gap: 10px;

          & > * {
            max-width: 100%;
          }
        }

        .featured-content--image {
          picture {
            min-height: 500px;

            img {
              height: 100%;
            }
          }
        }

        [data-item="overline"] {
          font-size: clamp(1.125rem, 1.62vw + 0.347rem, 1.563rem);
          line-height: 1.1;
          letter-spacing: 0;
          text-transform: none;
        }

        [data-item="banner-heading"] {
          width: 94%;
          margin-inline: auto;
          margin-bottom: 10px;
          letter-spacing: 0;
        }

        .stacked-text--description {
          font-size: clamp(1.125rem, 1.62vw + 0.347rem, 1.563rem);
        }

        .stacked-text--button {
          width: 50%;
          max-width: 330px;

          span {
            font-weight: 900;
            font-size: 20px;
            text-transform: uppercase;
          }
        }

        @media only screen and (max-width: 767px) {
          [data-item="banner-heading"] {
            width: 100%;
          }

          .stacked-text--button {
            width: 70%;

            span {
              height: 32px;
              font-size: 15px;
            }
          }
        }
      }
    }

    .featured-content--root:not([data-text-position="overlay"]) {
      .featured-content--container {
        background-color: #F9F9F9;
      }

      .stacked-text--root {
        .stacked-text--wrapper {
          margin-inline: auto;
          max-width: calc(640px + calc(var(--spacing--section--x) * 2));

          > * {
            max-width: 100%;
          }
        }

        [data-item="banner-heading"] {
          margin-bottom: 14px;
          font-size: 40px;
          letter-spacing: 0;
        }

        .stacked-text--description {
          font-size: 20px;
          line-height: 1.33;
        }

        .stacked-text--button {
          width: 100%;

          span {
            padding-inline: 30px;
            min-height: 50px;
            font-size: 20px;
          }
        }
      }

      @media only screen and (max-width: 767px) {
        .featured-content--container {
          padding-block-start: var(--spacing--item);
          padding-inline: var(--spacing--item);
        }

        .stacked-text--root {
          padding-top: 0;

          .stacked-text--wrapper {
            max-width: 100%;
            padding: 10% 0 !important;
          }
        }
      }
    }
  }

  .featured-grid--header,
  .testimonials--header,
  .image-comparison--header,
  .featured-video--header,
  .collapsible-rows--header {
    margin-bottom: 20px;

    [data-item="overline"] {
      font-size: clamp(0.938rem, 1.157vw + 0.382rem, 1.25rem);
      line-height: 1.1;
      letter-spacing: 0.07em;
      color: var(--button--bg-color);
    }

    [data-item~="section-heading"] {
      font-weight: 900;
      font-size: clamp(1.875rem, 4.63vw - 0.347rem, 3.125rem);
      line-height: 1.1;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    [data-item="paragraph"] {
      max-width: 860px;
      margin-inline: auto;
      line-height: 1.2;
    }
  }

  .featured-video--header {
    @media only screen and (min-width: 768px) {
      padding-inline: var(--spacing--section);
    }
  }

  .section--icons-row {
    .featured-grid--item {
      .featured-grid--item--media {
        --width: 80px !important;
      }

      .featured-grid--item--big-title {
        h3 {
          font-weight: 900;
          font-size: 60px;
          line-height: 0.7;
        }
      }

      .stacked-text--title {
        font-weight: 900;
        font-size: 24px;
        line-height: 1.2;
        letter-spacing: 0;
      }

      .stacked-text--description {
        margin: -6px 0 0;
        font-size: 18px;
        line-height: 1.33;
      }
    }

    .featured-grid--item--container {
      padding: 30px;
      gap: 20px;
      background-color: #F5F5F5;
      border-radius: 18px;
      transition-property: box-shadow;
      transition-timing-function: cubic-bezier(.4,0,.2,1);
      transition-duration: .3s;

      &:hover {
        --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);

        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
    }

    @media only screen and (max-width: 767px) {
      [data-container="panel"] {
        grid-row-gap: 24px;
      }

      .featured-grid--item {
        .featured-grid--item--media {
          --width: 60px !important;
        }

        .featured-grid--item--big-title {
          h3 {
            font-size: 40px;
          }
        }
      }

      .featured-grid--item--container {
        padding: 24px;
      }
    }
  }

  .section--text-columns {
    @media only screen and (min-width: 768px) {
      .carousel--container {
        gap: 18px !important;
      }
    }

    .featured-grid--item--container {
      gap: 20px;
    }

    .featured-grid--item--media {
      position: relative;
      padding-bottom: 50px;
      overflow: hidden;
      background-color: #f4f9ff;
      border-radius: 18px;

      [data-item="image"] {
        position: relative;
        z-index: 1;
      }

      > * {
        width: 100%;
      }
    }

    .featured-grid--item--badge {
      position: absolute;
      top: 5%;
      right: 5%;
      z-index: 2;
      width: auto;
      padding: 6px 10px;
      font-weight: 700;
      font-size: 13px;
      line-height: 1;
      letter-spacing: 0;
      text-transform: uppercase;
      background: var(--button--bg-color);
      color: var(--button--color);
    }

    .featured-grid--item--media-overlay {
      position: absolute;
      inset: auto 5% 5%;
      z-index: 2;
      width: auto;

      p {
        font-size: 18px;
        line-height: 1.33;
      }
    }

    .featured-grid--item--media-overlay-title {
      margin: 0;
      font-weight: 900;
      font-size: 22px;
      line-height: 1.25;
      letter-spacing: 0;
      text-transform: capitalize;
      text-align: left;
    }

    .featured-grid--item--content {
      display: flex;
      justify-content: center;

      [data-item="button"] {
        --button--bg-color: #001a13;
        --button--bg-color--hover: #2b2b2b;

        width: 90%;
        max-width: 280px;
        height: 50px;
        padding-bottom: 2px;
        font-weight: 900;
        font-size: 20px;
        line-height: 50px;
        letter-spacing: 0;
        text-transform: uppercase;
        display: flex;
        justify-content: center;
        align-items: center;
        transition-property: color, border-color, background-color;
        transition-duration: 0.3s;
        transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);

        &:hover {
          background-color: var(--button--bg-color--hover);
        }
      }
    }

    @media only screen and (max-width: 767px) {
      .carousel--wrapper {
        .carousel--container {
          --x-spacing: calc(var(--spacing--5) - (var(--slide-gap) / 2));
        }
      }

      .featured-grid--item--media-overlay-title {
        font-size: 20px;
      }

      .featured-grid--item--content {
        [data-item="button"] {
          height: 40px;
          font-size: 16px;
          line-height: 40px;
        }
      }
    }
  }

  .section--featured-video {
    .video--root {
      width: 100%;
      /* max-width: 500px; */
      margin-inline: auto;
      overflow: hidden;
      border-radius: 10px;
      transition-property: box-shadow;
      transition-timing-function: cubic-bezier(.4,0,.2,1);
      transition-duration: .3s;

      &:hover {
        --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
        --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);

        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
      }
    }

    .video--thumbnail::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .video--play {
      display: block;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%;
        height: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
      }

      svg {
        position: relative;
        z-index: 1;
        display: block;
      }
    }
  }

  .section--testimonials {
    overflow: hidden;

    [data-background-color="none"] {
      background-color: #F6F6F6;
    }

    .carousel--wrapper {
      overflow: visible;

      .carousel--prev,
      .carousel--next {
        top: 50%;
        transform: translateY(-50%);

        .icon--prev,
        .icon--next {
          padding: 20px;
        }
      }
    }

    .carousel--block {
      height: 100%;
    }

    .testimonials--block {
      height: 100%;
      gap: 20px;
      padding: 10.5% 7.5% 6%;
      flex-wrap: nowrap;
      background-color: #FFFFFF;

      .testimonials--header {
        width: 100%;
        margin-bottom: 0;
        display: flex;
        align-items: flex-start;
        gap: 16px;
        justify-content: space-between;

        [data-item="section-heading"] {
          font-size: 24px;
          letter-spacing: -0.016em;
          text-transform: none;
        }

        .testimonials--icon {
          padding-top: 5px;

          svg {
            fill: #117B5E;
          }
        }
      }

      [data-item="paragraph"] {
        line-height: 1.2;
      }

      .testimonials--footer {
        width: 100%;
        padding-top: 10px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;

        .testimonials--image {
          width: 16%;
          margin: 0;
        }

        .testimonials--name {
          font-size: 16px;
          line-height: 1.1;
          letter-spacing: 0;
          text-transform: capitalize;
        }
      }
    }

    @media only screen and (min-width: 768px) and (max-width: 1200px) {
      .carousel--root .carousel--container {
        --total-spaces: 4;
      }
    }
  }

  .section--image-comparison {
    .image-comparison--before-heading,
    .image-comparison--after-heading {
      font-weight: 900;
      font-size: 30px;
      line-height: 1;
      letter-spacing: -0.02em;
      text-transform: uppercase;
    }
  }

  .section--collapsible-rows {
    .collapsible-row--heading {
      font-weight: 900;
      font-size: 22px;
      line-height: 1.2;
      letter-spacing: 0;
    }

    @media only screen and (max-width: 767px) {
      .collapsible-row--heading {
        font-size: 20px;
      }
    }
  }

  .featured-grid--carousel,
  .testimonials--carousel {
    position: relative;

    .carousel-navigation {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      z-index: 10;
      justify-content: space-between;
      pointer-events: none;

      > span {
        display: none;
      }

      button {
        pointer-events: auto;
      }
    }
  }
  
}