 header,
  main {
    font-size: 20px;
  }
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    html,
    body {
      height: 100%;
      font-family: 'Ubuntu', sans-serif;
      color: #222;
      overflow-x: hidden;
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
      }
      .center {
        display: flex;
        align-items: center;
      }
      .row {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
      }
      [class*='col-'] {
        padding: 0 12px;
      }
      .col-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
      }
      .col-sm-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
      }
      .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
      }
      .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
      }
      .col-md-8 {
        flex: 0 0 66.6666%;
        max-width: 66.6666%;
      }
      .col-md-4 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
      }
      .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
      }
      .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
      }
      @media (max-width: 992px) {
        .col-md-6,
        .col-md-4,
        .col-md-8 {
          flex: 0 0 100%;
          max-width: 100%;
        }
        .col-4 {
          flex: 0 0 50%;
          max-width: 50%;
        }
      }
      @media (max-width: 576px) {
        .col-sm-4 {
          flex: 0 0 100%;
          max-width: 100%;
        }
        .col-sm-6 {
          flex: 0 0 100%;
          max-width: 100%;
        }
        .col-4 {
          flex: 0 0 100%;
          max-width: 100%;
        }
      }
    }
    strong {
      font-weight: 500;
    }
  }
  header {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    max-width: 1750px;
    margin: 0 auto;
    background-size: contain;
    @media (max-width: 715px) {
      background-image: url(https://www.loja.canon.com.br/wcsstore/cdb/pt_BR/marketing/cdb-banners/width-715.jpg);
    }
    @media (min-width: 716px) {
      background-image: url(https://www.loja.canon.com.br/wcsstore/cdb/pt_BR/marketing/cdb-banners/width-1440.jpg);
    }
    @media (min-width: 1241px) {
      background-image: url(https://www.loja.canon.com.br/wcsstore/cdb/pt_BR/marketing/cdb-banners/width-1920.jpg);
    }
    .intro-card {
      padding: 24px 24px 8px 24px;
      max-width: 920px;
      position: relative;
      z-index: 10;
      @media (max-width: 715px) {
        padding-top: 52vw;
      }
      @media (min-width: 716px) {
        padding-top: 52vw;
      }
      @media (min-width: 1241px) {
        padding-top: 39vw;
      }
      @media (min-width: 1700px) {
        padding-top: 670px;
      }
      p {
        font-family: 'Ubuntu', sans-serif;
        font-weight: 300;
        font-size: 16px;
        line-height: 23px;
        color: #454545;
        text-align: center;
        @media (min-width: 716px) {
          font-size: 22px;
          line-height: 30px;
        }
      }
    }
  }
  main {
    h2 {
      margin-bottom: 20px;
    }
    #features {
      background-color: #f0e1fe;
      margin: 50px 0;
      padding: 30px 0;
      .feature-1,
      .feature-2,
      .feature-3 {
        display: flex;
        flex-direction: row;
      }
      .feature-img {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        justify-content: center;
        display: flex;
        padding: 0;
        @media (max-width: 1200px) {
          width: 660px;
        }
        img {
          width: 100%;
          height: auto;
        }
      }
      .feature-txt {
        display: flex;
        flex-direction: column;
        padding: 0 36px;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        text-align: center;
        max-width: 780px;
        margin: 30px auto 0;
        @media (min-width: 1200px) {
          padding: 0 60px;
          max-width: 100%;
          text-align: left;
          margin: 0;
        }
      }
      .feature-2 {
        flex-direction: row-reverse;
      }
    }
    #models {
      h1 {
        font-size: calc(1.375rem + 1vw);
        @media (min-width: 500px) {
          font-size: calc(1.375rem + 2vw);
        }
        @media (min-width: 612px) {
          font-size: calc(1.375rem + 1.7vw);
        }
      }
      .model-card img {
        width: 100% !important;
        max-width: 200px;
        @media (min-width: 575px) {
          max-width: none;
        }
      }
    }
    #content {
      background-color: #161616;
      margin-top: 50px;
      padding: 30px 0;
      h1 {
        color: #ffffff;
        font-weight: 300;
        font-size: calc(1.375rem + 1vw);
        max-width: 100%;
        padding: 0;
        @media (min-width: 620px) {
          font-size: calc(1.375rem + 2vw);
          max-width: 100%;
          padding: 0;
        }
        @media (min-width: 650px) {
          font-size: calc(1.375rem + 2vw);
          max-width: 100%;
          padding: 0 100px;
        }
        @media (min-width: 714px) {
          padding: 0 125px;
        }
        @media (min-width: 780px) {
          padding: 0 30px;
        }
        @media (min-width: 910px) {
          font-size: 43px;
          padding: 0 120px;
        }
        @media (min-width: 1000px) {
          width: 1020px;
          font-size: 43px;
          padding: 0 60px;
          margin: 0 auto;
        }
        @media (min-width: 1030px) {
          width: 1020px;
          font-size: 43px;
          padding: 0 100px;
          margin: 0 auto;
        }
      }
      span {
        font-weight: 900;
        font-style: italic;
        font-size: calc(2.275rem + 1vw);
        @media (min-width: 500px) {
          font-size: calc(2.275rem + 2vw);
        }
        @media (min-width: 650px) {
          font-size: calc(2.275rem + 1.7vw);
        }
        @media (min-width: 910px) {
          font-size: 60px;
        }
        @media (min-width: 1000px) {
          font-size: 60px;
        }
      }
    }
  }