/*--------------------------------------------------------------
8.0 MEDIA
--------------------------------------------------------------*/

/*--------------------------------------------------------------
| 8.1 768PX
--------------------------------------------------------------*/

@media screen and (min-width: 48rem) {

  /*------------------------------------------------------------
  VARIABLE
  ------------------------------------------------------------*/

  :root {

    /*----------------------------------------------------------
    | TYPOGRAPHY
    ----------------------------------------------------------*/

    /* FONT SIZE */

    --ui-typography-h1: 2.1875rem;
    --ui-typography-h2: 1.75rem;
    --ui-typography-p: 1.125rem;
    --ui-typography-s: .875rem;

    /* MARGIN */

    --ui-typography-margin-body: 1.25rem;

    /*----------------------------------------------------------
    | LAYOUT
    ----------------------------------------------------------*/

    --ui-layout-container: 4.25rem;
    --ui-layout-gutter: 1.5rem;

    /* GAP */

    --ui-gap-header: 1.5rem;
    --ui-gap-card: 1.5rem;

  }

  /*------------------------------------------------------------
  IMAGE
  ------------------------------------------------------------*/

  .ui-image-half-left {
    padding-right: var(--ui-layout-gutter);
  }

  .ui-image-half-right {
    padding-left: var(--ui-layout-gutter);
  }

  .ui-image-half-right-mask {
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    -webkit-mask-image: linear-gradient(to left, black 65%, transparent);
    mask-image: linear-gradient(to left, black 65%, transparent);
  }

  /*------------------------------------------------------------
  LAYOUT
  ------------------------------------------------------------*/

  .ui-layout-container,
  .ui-layout-column-center {
    margin-left: auto;
    margin-right: auto;
  }

  .ui-layout-grid-2,
  .ui-layout-grid-3 {
    column-gap: var(--ui-layout-gutter);
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }

  .ui-layout-grid-3 div:nth-of-type(3) {
    left: calc(50% + (var(--ui-layout-gutter) / 2));
    position: relative;
  }

  .ui-layout-column-4 {
    width: calc((var(--ui-layout-grid) * 4) + (var(--ui-layout-gutter) * 3));
  }

  /*------------------------------------------------------------
  COMPONENT
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  | LIST
  ------------------------------------------------------------*/

  .ui-component-list--item {
    background-size: 1.25rem;
    padding-left: 2rem;
  }

  /*------------------------------------------------------------
  SECTION
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  | HEADER
  ------------------------------------------------------------*/

  .ui-section-header {
    padding-bottom: 0;
    padding-top: 2rem;
  }

  /* ICON */

  .ui-section-header--menu-icon {
    display: none;
  }

  /* NAV */

  .ui-section-header--nav {
    background-color: transparent;
    box-shadow: none;
    flex-direction: row;
    opacity: 1;
    padding: 0;
    position: static;
    visibility: visible;
  }

  .ui-section-header--nav-link {
    font-size: var(--ui-typography-p);
    padding: 0;
  }

  /*------------------------------------------------------------
  | HERO
  ------------------------------------------------------------*/

  .ui-section-hero {
    text-align: left;
  }

  .ui-section-hero .ui-component-cta {
    align-items: start;
  }

  /*------------------------------------------------------------
  | CUSTOMER
  ------------------------------------------------------------*/

  .ui-section-customer__layout {
    column-gap: var(--ui-gap-customer);
    flex-direction: row;
  }

  .ui-section-customer--logo {
    margin-left: 0;
    margin-right: 0;
  }

  /*------------------------------------------------------------
  | FEATURE
  ------------------------------------------------------------*/

  .ui-section-feature__layout:first-of-type div {
    grid-row-start: initial;
  }

  /*------------------------------------------------------------
  | PRICING
  ------------------------------------------------------------*/

  .ui-component-card--pricing {
    padding: 2rem 2rem 2.25rem;
  }

  /*------------------------------------------------------------
  | FOOTER
  ------------------------------------------------------------*/

  .ui-section-footer {
    padding-bottom: 2rem;
    padding-top: 2rem;
  }

}

/*--------------------------------------------------------------
| 8.2 1024PX
--------------------------------------------------------------*/

@media screen and (min-width: 64rem) {

  /*------------------------------------------------------------
  VARIABLE
  ------------------------------------------------------------*/

  :root {

    /*----------------------------------------------------------
    | LAYOUT
    ----------------------------------------------------------*/

    --ui-layout-container: 0;

  }

  /*------------------------------------------------------------
  LAYOUT
  ------------------------------------------------------------*/

  .ui-layout-container {
    width: 60rem;
  }

  .ui-layout-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .ui-layout-grid-3 div:nth-of-type(3) {
    position: static;
  }

  /*------------------------------------------------------------
  SECTION
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  | HERO
  ------------------------------------------------------------*/

  .ui-section-hero .ui-component-cta {
    align-items: center;
    column-gap: var(--ui-gap-cta);
    flex-direction: row;
    justify-content: start;
  }

}

/*--------------------------------------------------------------
| 8.3 1200PX
--------------------------------------------------------------*/

@media screen and (min-width: 75rem) {

  /*------------------------------------------------------------
  VARIABLE
  ------------------------------------------------------------*/

  :root {

    /*----------------------------------------------------------
    | TYPOGRAPHY
    ----------------------------------------------------------*/

    /* FONT SIZE */

    --ui-typography-h1: 2.75rem;
    --ui-typography-h2: 2.1875rem;
    --ui-typography-h4: 1.4375rem;

    /* MARGIN */

    --ui-typography-margin-heading: 1rem;
    --ui-typography-margin-body: 1.75rem;

    /*----------------------------------------------------------
    | LAYOUT
    ----------------------------------------------------------*/

    --ui-layout-grid: 4rem;
    --ui-layout-gutter: 2rem;

    /* GAP */

    --ui-gap-header: 2rem;
    --ui-gap-customer: 4rem;
    --ui-gap-card: 2rem;
    --ui-gap-pricing: 3rem;

  }

  /*------------------------------------------------------------
  TYPOGRAPHY
  ------------------------------------------------------------*/

  .ui-text-intro {
    font-size: var(--ui-typography-h4);
  }

  /*------------------------------------------------------------
  LAYOUT
  ------------------------------------------------------------*/

  .ui-layout-container {
    width: 70rem;
  }

  /*------------------------------------------------------------
  COMPONENT
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  | BUTTON
  ------------------------------------------------------------*/

  .ui-component-button-big,
  .ui-component-button-normal {
    padding-bottom: 1.125rem;
    padding-top: 1rem;
  }

  /*------------------------------------------------------------
  SECTION
  ------------------------------------------------------------*/

  /*------------------------------------------------------------
  | HEADER
  ------------------------------------------------------------*/

  .ui-section-header {
    padding-top: 3rem;
  }

  /*------------------------------------------------------------
  | HERO
  ------------------------------------------------------------*/

  .ui-section-hero {
    padding-bottom: 7.5rem;
    /** padding-top: 7.5rem; */
  }

  /*------------------------------------------------------------
  | CUSTOMER
  ------------------------------------------------------------*/

  .ui-section-customer--logo {
    height: 2rem;
  }

  .ui-section-customer--logo-str {
    height: 2.25rem;
  }

  .ui-section-customer--logo-bhn {
    height: 1.75rem;
  }

  /*------------------------------------------------------------
  | FEATURE
  ------------------------------------------------------------*/

  .ui-section-feature {
    /** padding-bottom: 7.5rem; */
    padding-top: 7.5rem;
  }

  .ui-section-feature__layout:last-of-type {
    margin-top: 7.5rem;
  }

  /* LIST */
  .ui-component-list-feature {
    column-gap: var(--ui-layout-gutter);
    grid-template-columns: repeat(2, 1fr);
  }

  /*------------------------------------------------------------
  | PRICING
  ------------------------------------------------------------*/

  .ui-section-pricing {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;
  }

  .ui-component-card--pricing {
    padding: 3rem;
  }

  /*------------------------------------------------------------
  | TESTIMONIAL
  ------------------------------------------------------------*/

  .ui-section-testimonial {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;
  }

  /*------------------------------------------------------------
  | CLOSE
  ------------------------------------------------------------*/

  .ui-section-close {
    padding-bottom: 7.5rem;
    padding-top: 7.5rem;
  }

  /*------------------------------------------------------------
  | FOOTER
  ------------------------------------------------------------*/

  .ui-section-footer {
    padding-bottom: 3rem;
    padding-top: 3rem;
  }

}