<header class="header">
    <div class="promo-bar js-promo-bar">
        <div class="promo-bar__inner u-page-width-max">
            <a class="promo-bar__link" href="#">Free shipping and free returns</a>
            <button class="promo-bar__close-button">
      <span class="u-visually-hidden">Close</span>
      <svg class="icon icon--close">
  <use xlink:href="/assets/icons/icons.svg#close"></use>
</svg>

    </button>
        </div>
    </div>

    <div class="headroom">
        <nav class="header-nav">
            <ul class="header-nav__primary">
                <li class="header-nav__primary-item header-nav__primary-item--active">
                    <a class="header-nav__primary-link" href="#">Sunglasses</a>
                    <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
                        <div class="u-page-width-max">
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    Shop
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary header-nav__tertiary--marketing js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Frame Style</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Aviators</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Classic</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Wrap</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Fashion</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Rectangular</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Cat Eye</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Rimless</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shield</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--accent" href="#">
                              All Frames
                              <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                            </a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">Activity</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Golf</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Fish</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Surf</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Run</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Drive</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Hike</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Tennis</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="header-nav__tertiary-menu">
                                                <span class="header-nav__tertiary-menu-label">More</span>
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">New Arrivals</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Best Sellers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Accessories</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Readers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Blue Hawaii</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <div class="header-nav__tertiary-marketing-placement">
                                            <a class="header-nav__tertiary-marketing-link" href="#">
                                                <div class="header-nav__tertiary-marketing-image" style="background-image: url('/assets/images/megamenu-marketing-placement.jpg');"></div>
                                                <div class="header-nav__tertiary-marketing-text">
                                                    <span class="header-nav__tertiary-marketing-title">Blue Hawaii</span>
                                                    <span class="header-nav__tertiary-marketing-cta">Shop now</span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    MyMaui
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Home Try-on
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Vintage
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Apparel
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="tel:+1800229933">
                    1-888-666-5905
                    <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Contact Us
                    <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Find a Retailer
                    <svg class="icon icon--action-location">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <button class="header-nav__secondary-button js-header-nav-button">
                    Customer Service
                    <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

                  </button>
                                    <div class="header-nav__tertiary-wrapper u-page-width-max">
                                        <button class="header-nav__tertiary-back-button js-header-nav-back-button">
                      <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

                      Back
                    </button>
                                        <ul class="header-nav__tertiary js-header-nav--tertiary">
                                            <li class="header-nav__tertiary-menu">
                                                <ul class="header-nav__tertiary-menu-items">
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Order Status</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Repairs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Returns</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Product Registration</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Retailers</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">FAQs</a>
                                                    </li>
                                                    <li class="header-nav__tertiary-menu-item">
                                                        <a class="header-nav__tertiary-menu-link" href="#">Shipping Information</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Account
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Orders
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link" href="#">
                    Your Wishlist
                  </a>
                                </li>
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link header-nav__secondary-link--logout" href="#">
                    Logout
                  </a>
                                </li>
                            </ul>
                            <ul class="header-nav__secondary js-header-nav--secondary">
                                <li class="header-nav__secondary-item js-header-nav-item">
                                    <a class="header-nav__secondary-link js-modal-open-link" href="#" data-modal-id="country-selector">
                    United States
                    <img src="/assets/images/flag-us.png" alt="United States" width="22" height="14">
                  </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="header-nav__primary-item">
                    <a class="header-nav__primary-link" href="#">Eyeglasses</a>
                    <div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
                        <div class="u-page-width-max">
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
        <div class="header-menu-bar"></div>
        <a class="header__logo-wrapper" href="#">
      <img class="header__logo" src="/assets/images/mauijim-brand-logo.png" alt="Maui Jim logo">
    </a>
        <div class="header__menu-icon">
            <button class="hamburger-spring header__icon header__icon--menu  js-header-icon--menu" type="button">
        <span class="u-visually-hidden">Menu</span>
        <span class="hamburger-spring__box">
          <span class="hamburger-spring__inner"></span>
        </span>
      </button>
        </div>
        <div class="header__icons">
            <div class="header__icons-inner">
                <button class="header__icon header__icon--search js-header-icon--search">
          <span class="u-visually-hidden">Search</span>
          <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
                <button class="header__icon header__icon--wishlist">
          <span class="u-visually-hidden">Wishlist</span>
          <svg class="icon icon--heart-item">
  <use xlink:href="/assets/icons/icons.svg#heart-item"></use>
</svg>

        </button>
                <button class="header__icon header__icon--account">
          <span class="u-visually-hidden">Account</span>
          <svg class="icon icon--account">
  <use xlink:href="/assets/icons/icons.svg#account"></use>
</svg>

        </button>
                <button class="header__icon header__icon--cart header__icon--cart--button js-header-icon--cart">
          <span class="u-visually-hidden">Cart</span>
          <svg class="icon icon--cart">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

          <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

        </button>
                <a href="#" class="header__icon header__icon--cart header__icon--cart--link">
          <span class="u-visually-hidden">Cart</span>
          <svg class="icon icon--cart">
  <use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>

          <svg class="icon icon--cart-item">
  <use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>

        </a>
                <button class="header-nav__country js-modal-open-link" data-modal-id="country-selector">
          <img class="header-nav__country-image" src="/assets/images/flag-us.png" alt="US" width="31" height="20">
          <span class="header-nav__country-label">US</span>
        </button>
            </div>
        </div>
        <div class="header-search header-flyout header-flyout--search js-header-search">
            <form class="header-search__form">
                <input class="header-search__input js-header-search-input" type="text" placeholder="Search on Maui Jim">
                <button class="header-search__button js-header-search-button" type="reset">
          <span class="u-visually-hidden">Clear</span>
          <svg class="icon icon--search">
  <use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>

          <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

        </button>
            </form>
            <div class="header-search__list">
                <span class="header-search__list-label">Latest Search</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Koko Head</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Tail Slide</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__list">
                <span class="header-search__list-label">Popular Searches</span>
                <ul class="header-search__list-items">
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Aviators</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Man</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Surf</a>
                    </li>
                    <li class="header-search__list-item">
                        <a class="header-search__list-link js-header-search-list-link" href="#">Vintage</a>
                    </li>
                </ul>
            </div>
            <div class="header-search__results">
                <a class="header-search__result-link" href="#">View all results <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Ho&#x27;okipa Reader Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Sandy Beach Universal Fit</span>
          </a>
                </div>
                <div class="search-autocomplete-result">
                    <a class="search-autocomplete-result__link" href="#">
            <span class="search-autocomplete-result__image-container">
              <img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
                srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
            </span>
            <span class="search-autocomplete-result__title">Hanalei Universal Fit</span>
          </a>
                </div>
            </div>
        </div>
        <div class="header-cart header-cart--default header-cart--tax header-flyout header-flyout--cart js-header-cart">
            <div class="header-cart__header">
                <span class="header-cart__title">Your Cart <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
                <span class="header-cart__item-count">4 items</span>
            </div>
            <div class="header-cart__products">
                <div class="header-cart__item">
                    <a href="#202-02"><img class="header-cart__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;330" alt="Gloss Black"></a>
                    <span class="header-cart__item-info header-cart__item-info--name">PEAHI</span>
                    <span class="header-cart__item-info">Gloss Black</span>
                    <span class="header-cart__item-info">Neutral Grey</span>
                    <span class="header-cart__item-info">SuperThin Glass</span>
                    <span class="header-cart__item-info">Single Gradient</span>
                    <span class="header-cart__item-info header-cart__item-info--qty">Qty: 1</span>
                    <span class="header-cart__item-info header-cart__item-info--price">$149.00</span>
                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                </div>
                <div class="header-cart__item">
                    <a href="#HTS267-15C"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;330" alt="Olive Stripe"></a>
                    <span class="header-cart__item-info header-cart__item-info--name">WATERWAYS</span>
                    <span class="header-cart__item-info">Olive Stripe</span>
                    <span class="header-cart__item-info">Maui HT™</span>
                    <span class="header-cart__item-info">SuperThin Glass</span>
                    <span class="header-cart__item-info">Single Gradient</span>
                    <div class="header-cart__item-vip-info">
                        <span class="header-cart__item-vip-card-value">VIP Card 30%</span>
                        <span class="header-cart__item-vip-original-price">$319.00</span>
                    </div>
                    <span class="header-cart__item-info header-cart__item-info--qty">Qty: 1</span>
                    <span class="header-cart__item-info header-cart__item-info--price">$219.00</span>
                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                </div>
                <div class="header-cart__item">
                    <a href="#H257-16C"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;330" alt="Tortoise with Antique Gold"></a>
                    <span class="header-cart__item-info header-cart__item-info--name">KAWIKA</span>
                    <span class="header-cart__item-info">Tortoise with Antique Gold</span>
                    <span class="header-cart__item-info">HCL® Bronze</span>
                    <span class="header-cart__item-info">MauiPure</span>
                    <span class="header-cart__item-info">Single Gradient</span>
                    <div class="header-cart__item-vip-info">
                        <span class="header-cart__item-vip-card-value">VIP Card 30%</span>
                        <span class="header-cart__item-vip-original-price">$319.00</span>
                    </div>
                    <span class="header-cart__item-info header-cart__item-info--qty">Qty: 1</span>
                    <span class="header-cart__item-info header-cart__item-info--price">$299.00</span>
                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                </div>
                <div class="header-cart__item">
                    <a href="#H178-10"><img class="header-cart__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;330" alt="Tortoise"></a>
                    <span class="header-cart__item-info header-cart__item-info--name">VOYAGER</span>
                    <span class="header-cart__item-info">Tortoise</span>
                    <span class="header-cart__item-info">HCL® Bronze</span>
                    <span class="header-cart__item-info">SuperThin Glass</span>
                    <span class="header-cart__item-info">Single Gradient</span>
                    <span class="header-cart__item-info header-cart__item-info--qty">Qty: 1</span>
                    <span class="header-cart__item-info header-cart__item-info--price">$219.00</span>
                    <button class="header-cart__item-remove button button--plain-text">Remove</button>
                </div>
            </div>
            <div class="header-cart__footer">
                <div class="header-cart__subtotal">
                    <span class="header-cart__subtotal-label">Order Subtotal (4):</span>
                    <span class="header-cart__subtotal-value">$1,096.00</span>
                    <span class="header-cart__subtotal-tax">Inkl. MWST</span>
                </div>
                <div class="header-cart__actions">
                    <a class="header-cart__action button button--primary" href="#">View your cart</a>
                </div>
            </div>
        </div>
        <div class="header-flyout-overlay js-header-flyout-overlay"></div>
    </div>
</header>

<main class="main main--technology u-page-width-max">
    <ul class="breadcrumb u-page-width-max-gutters">
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Maui Jim</a>
        </li>
        <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">Technology</a>
        </li>
        <li class="breadcrumb__item breadcrumb__item--current">
            The Benefits
        </li>
    </ul>

    <div class="l-technology-secondary-hero">
        <div class="secondary-hero">
            <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-technology-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-technology-small.jpg 432w, /assets/images/hero-technology-large.jpg 1420w">
            <div class="secondary-hero__copy">
                <h1 class="secondary-hero__title">The Benefits</h1>
                <button class="button button--outlined secondary-hero__call-to-action">Download the Sheet</button>

            </div>
        </div>

    </div>
    <div class="l-technology-card-tabs">
        <div class="card-tabs js-card-tabs">
            <ul class="card-tabs__tabs">
                <li class="card-tabs__tab js-card-tabs-tab js-card-tabs-tab--active" data-tab="glare">Glare Elimination</li>
                <li class="card-tabs__tab js-card-tabs-tab" data-tab="color">Color Enhancement</li>
                <li class="card-tabs__tab js-card-tabs-tab" data-tab="health">Eye Health</li>
                <li class="card-tabs__tab js-card-tabs-tab" data-tab="protection">Lens Protection</li>
            </ul>
            <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper js-card-tabs-content-wrapper--active" data-tab="glare">
                <h3 class="card-tabs__content-title">Glare Elimination</h3>
                <h4 class="card-tabs__content-subtitle">See True</h4>
                <div class="card-tabs__content-description">
                    <p>Glare washes out colors, obscures details, and fatigues your eyes. PolarizedPlus2® lenses eliminate 99.9% of glare, allowing you to see the world at its brilliant best. Feature the industry&#x27;s most advanced techniques, our patented
                        lens creation process creates an amazing difference you&#x27;ll see immediately.</p>
                </div>
                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined">View</button>
                        </div>
                    </a>
                </div>

                <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
            </div>
            <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper" data-tab="color">
                <h3 class="card-tabs__content-title">Color Enhancement</h3>
                <h4 class="card-tabs__content-subtitle">Perceive More</h4>
                <div class="card-tabs__content-description">
                    <p>Many sunglass lenses simply darken your view, dimming and fading color for a flat, low-contrast perspective.</p>
                    <p>Our PolarizedPlus2® lenses enhance the colors your eyes naturally perceive. So you see vibrant, saturated colors with a higher level of contrast and greater depth perception.</p>
                </div>
                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined">View</button>
                        </div>
                    </a>
                </div>

                <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
            </div>
            <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper" data-tab="health">
                <h3 class="card-tabs__content-title">Eye Health</h3>
                <h4 class="card-tabs__content-subtitle">Be Well</h4>
                <div class="card-tabs__content-description">
                    <p>Just like your skin, your eyes need protection from exposure to the sun&#x27;s rays. PolarizedPlus2® lenses eliminate 100% of UV radiation and provide protection against a number of additional stresses, helping your eyes stay healthy
                        so you can keep taking in all the world&#x27;s beauty.</p>
                </div>
                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
            </div>
            <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper" data-tab="protection">
                <h3 class="card-tabs__content-title">Lens Protection</h3>
                <h4 class="card-tabs__content-subtitle">Live Freely</h4>
                <div class="card-tabs__content-description">
                    <p>Our sunglasses are meant to be worn, on sunny and cloudy days, on the beach and city streets. They&#x27;re there to protect your eyes and reveal the world&#x27;s brilliance, so the last thing we want is for you to worry about them.</p>
                    <p>Our PolarizedPlus2® lenses incorporate a number of technologies specifically intended to maximize durability and convenience.</p>
                </div>
                <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                            <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                            <button class="big-card__call-to-action button button--outlined">View</button>
                        </div>
                    </a>
                </div>

                <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
                    <a class="big-card__link" href="#">
                        <div class="big-card__image-container">
                            <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                        </div>
                        <div class="big-card__text">
                            <span class="big-card__prefix">New Arrivals</span>
                            <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                            <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                        </div>
                    </a>
                </div>

                <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
            </div>
        </div>

    </div>
    <div class="l-technology-technology-link">
        <div class="technology-link">
            <img class="technology-link__image" src="/assets/images/technology-link-lens.jpg" alt="The Lens">
            <span class="technology-link__title">The Lens</span>
            <a class="button button--primary technology-link__call-to-action" href="#">Learn More</a>
        </div>

    </div>
</main>
<div class="subscribe">
    <div class="u-page-width-max">
        <div class="subscribe__text">
            <h5 class="subscribe__header">Subscribe to our &#x27;ohana</h5>
            <span class="subscribe__description">Keep up with the Latest Products and News.</span>
        </div>
        <div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--default">
            <form class="subscribe-form">
                <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
                <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
            </form>
            <div class="subscribe-form-status">
                <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
            </div>
            <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
        </div>

    </div>
</div>

<footer class="footer footer--default">
    <div class="footer-nav u-page-width-max">
        <a class="footer-nav__action footer-nav__action--phone" href="tel:+1800229933">
      1-888-666-5905
      <svg class="icon icon--action-phone">
  <use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--contact" href="#">
      Contact Us
      <svg class="icon icon--action-mail">
  <use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>

    </a>
        <a class="footer-nav__action footer-nav__action--retailers" href="#">
      Find a Retailer
      <svg class="icon icon--action-location">
  <use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>

    </a>
        <div class="footer-nav__menus">
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Maui Jim
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">About Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Contact Us</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Technology</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Golf Events</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Corporate Gifts</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link js-modal-open-link" href="#" data-modal-id="data-protection">Careers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Austine Wood Comarow Polage ® Art</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Trade Login</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Customer Service
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Order Status</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Repairs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Returns</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Product Registration</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Prescription</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Retailers</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">FAQs</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shipping Information</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="footer-nav__menu-column">
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Legal
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Terms of Use</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Privacy Policy</a>
                        </li>
                    </ul>
                </div>
                <div class="footer-nav__menu js-footer-nav-menu">
                    <button class="footer-nav__menu-button js-footer-nav-button">
            Gift Cards
            <svg class="icon icon--arrow-up">
  <use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>

            <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

            <svg class="icon icon--arrow-down">
  <use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>

          </button>
                    <ul class="footer-nav__menu-items">
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">VIP &amp; Gift Cardholder</a>
                        </li>
                        <li class="footer-nav__menu-item">
                            <a class="footer-nav__menu-link" href="#">Shop Gift Card</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-nav__forms">
            <form class="footer__retailer-form">
                <label class="footer__retailer-label" for="footer__retailer-input">Retailers</label>
                <input class="footer__retailer-input" name="footer__retailer-input" type="text" placeholder="ZIP code or City" />
                <button class="footer__retailer-submit" type="submit">
          <svg class="icon icon--angle-right">
  <use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>

        </button>
            </form>
            <div class="subscribe-form-wrapper subscribe-form-wrapper--mini js-subscribe-form js-subscribe-form--default">
                <form class="subscribe-form">
                    <input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Subscribe to Our &#x27;Ohana" autocomplete="email">
                    <button class="subscribe-form__submit button button--primary">
      <span class="subscribe-form__submit-label">Subscribe</span>
      <svg class="icon icon--submit-mail">
  <use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>

    </button>
                </form>
                <div class="subscribe-form-status">
                    <span class="subscribe-form-status__message js-subscribe-status-message"></span>
                    <span class="subscribe-form-status__close js-subscribe-status-close-button">
      <svg class="icon icon--close-large">
  <use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>

    </span>
                </div>
                <span class="subscribe-form-legal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
  </span>
            </div>

        </div>
    </div>
    <div class="footer__bottom">
        <div class="u-page-width-max">
            <a class="footer__geo footer__geo--country js-modal-open-link" data-modal-id="country-selector" href="#">
        <span class="footer__geo-label">Country:</span>
        <span class="footer__geo-current">
          United Arab Emirates
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </a>
            <a class="footer__geo footer__geo--language js-modal-open-link" data-modal-id="language-selector" href="#">
        <span class="footer__geo-current">
          English
          <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

        </span>
      </a>
            <ul class="social-icons">
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-twitter">
  <use xlink:href="/assets/icons/icons.svg#social-twitter"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-facebook">
  <use xlink:href="/assets/icons/icons.svg#social-facebook"></use>
</svg>
</a>
                </li>
                <li class="social-icons__item">
                    <a class="social-icons__link" href="#"><svg class="icon icon--social-instagram">
  <use xlink:href="/assets/icons/icons.svg#social-instagram"></use>
</svg>
</a>
                </li>
            </ul>

        </div>
    </div>
    <div class="footer__copyright">
        <img class="footer__copyright-logo" src="/assets/images/mauijim-brand-logo-monochromatic.svg">
        <span class="footer__copyright-text">©2016 Maui Jim, Inc. Lahana, Hawaii</span>
    </div>
</footer>
{{render (dynamicComponent header)}}
{{#each topComponents}}
{{render (dynamicVariant component variant) context}}
{{/each}}
<main class="main main--technology u-page-width-max">
  {{#if breadcrumb}}
  {{render '@breadcrumb' breadcrumb}}
  {{/if}}
  {{#if pageTitle}}
  <h2 class="page-title page-title--{{pageTitle.modifier}}">{{pageTitle.value}}</h2>
  {{/if}}
  {{#each components}}
  <div class="l-technology-{{component}}{{#each classes}} {{this}}{{/each}}"{{#each data}} data-{{@key}}="{{this}}"{{/each}}>
    {{render (dynamicVariant component variant) context merge=merge}}
  </div>
  {{/each}}
</main>
{{render '@subscribe'}}
{{render (dynamicComponent footer)}}
{
  "header": "header",
  "footer": "footer",
  "breadcrumb": {
    "items": [
      {
        "label": "Maui Jim",
        "path": "#"
      },
      {
        "label": "Technology",
        "path": "#"
      },
      {
        "label": "The Benefits",
        "current": true
      }
    ]
  },
  "components": [
    {
      "component": "secondary-hero",
      "variant": "default",
      "context": {
        "title": "The Benefits",
        "image": {
          "small": {
            "src": "/assets/images/hero-technology-small.jpg",
            "width": "432"
          },
          "large": {
            "src": "/assets/images/hero-technology-large.jpg",
            "width": "1420"
          },
          "vw": "100"
        },
        "callsToAction": [
          {
            "modifier": "outlined",
            "buttonValue": "Download the Sheet",
            "classes": [
              "secondary-hero__call-to-action"
            ]
          }
        ]
      }
    },
    {
      "component": "card-tabs",
      "variant": "default"
    },
    {
      "component": "technology-link",
      "variant": "lens"
    }
  ]
}
  • Content:
    .page-title--technology {
      margin: 25px $gutter-width-half 0;
      padding-bottom: 0;
      border: 0;
      color: $color-dark;
      font-size: 3.0rem;
      letter-spacing: 3px;
      line-height: 3.6rem;
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 15px;
        margin-bottom: 45px;
        font-size: 3.8rem;
        line-height: 4.6rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 0;
        margin-bottom: 65px;
        font-size: 5.7rem;
        line-height: 6.8rem;
      }
    }
    
    .l-technology-big-card .big-card,
    .l-technology-card-tabs .big-card,
    .l-technology-mosaic-card .mosaic-card,
    .l-technology-centered-text .centered-text--patterned,
    .l-technology-lens-features .lens-features {
      margin-top: 20px;
      margin-bottom: 20px;
    }
    
    .l-technology-secondary-hero .secondary-hero {
      margin-bottom: 20px;
    }
    
    .l-technology-lens-colors,
    .l-technology-technology-link {
      margin: 60px 0;
    
      @include breakpoint($breakpoint-md) {
        margin: 80px 0;
      }
    }
    
    .l-technology-card-tabs {
      @include breakpoint($breakpoint-md) {
        margin-top: 30px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 60px;
      }
    }
    
    .l-technology-lens-collections {
      @include breakpoint($breakpoint-xl) {
        max-width: 1270px;
        margin: 0 auto;
      }
    }
    
    .l-technology-lens-comparison {
      margin-top: 30px;
    }
    
    .l-technology-big-card--left .big-card__text {
      @include breakpoint($breakpoint-sm-only) {
        text-align: left;
      }
    }
    
  • URL: /components/raw/technology-page/technology-page.scss
  • Filesystem Path: src/components/03-pages/technology-page/technology-page.scss
  • Size: 1.4 KB

There are no notes for this item.