#hp-update #hero {
    overflow: hidden;
  }
  @media (max-width: 640px) {
    #hp-update #hero {
      align-items: stretch;
    }
  }
  @media (min-width: 641px) {
    #hp-update #hero a {
      width: 54%;
    }
  }
  #hp-update #hero a .images {
    width: 92% !important;
    margin: 3em auto;
    gap: 0.75em;
    max-width: 100vw !important;
    flex-direction: revert;
  }
  @media (min-width: 641px) {
    #hp-update #hero a .images {
      width: 100% !important;
      margin: 0 !important;
      gap: 2em;
    }

    #hp-update #hero .images img {
        max-width: unset;
    }
  }

  @media (max-width:640px) {
    #hp-update #hero a .images{
      margin: 0;
      width: 100% !important;
      gap: 2em;
    }
  }

  #hp-update #hero a .images div {
    width: 50%;
  }
  #hp-update #hero .content-overlay {
    text-align: center;
    padding-bottom: 0 !important;
    left: 53%;
    top: 10%;
    position: relative !important;
    margin-top: 9em !important;
  }
  @media (min-width: 641px) {
    #hp-update #hero .content-overlay {
      position: absolute !important;
      width: 60%;
      left: 36.5% !important;
      top: 50% !important;
      margin-top: 0 !important;
    }
  }
  @media (max-width: 640px) {
    #hp-update #hero .content-overlay {
      text-align: center;
      padding-bottom: 0 !important;
      top: 17%;
      position: relative !important;
      margin-top: 3em !important;
    }
  }
  #hp-update #hero .content-overlay h2 {
    font-size: 8.8em;
  }
  @media (min-width: 641px) {
    #hp-update #hero .content-overlay h2 {
      font-size: 12em;
    }
  }
  #hp-update #hero .content-overlay h3 {
    font-family: "Matter" !important;
    text-align: left;
    font-size: 3.2em;
  }
  @media (max-width: 640px) {
    #hp-update #hero .content-overlay h3 {
      padding-bottom: 0;
    }
  }
  @media (min-width: 641px) {
    #hp-update #hero .content-overlay h3 {
      font-size: 3.4em !important;
    }
  }

  #hp-update #hero p {
    color: #fff;
  }
  #hp-update #hero .cta:nth-of-type(1) {
    margin-right: 2em;
    min-width: 11em;
  }
  #hp-update #hero .cta {
    margin: 0.75em auto 0 0 !important;
    font-size: 2.8em !important;
  }
  #hp-update #hero h4 {
    font-size: 1.2em;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 45%;
    top: 6%;
    text-align: right;
    width: 100%;
    color: #fff;
  }
  #hp-update #hero h4 span {
    font-family: "Matter";
    text-align: right;
    display: block;
  }
  @media (min-width: 641px) {
    #hp-update #hero h4 {
      font-size: 1.5em;
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 7%;
      width: 95%;
      text-align: right;
    }
    #hp-update #hero p {
      color: white;
    }
  
  }
  
  @media (min-width: 769px) {
    #hp-update {
      padding: 0.8em 1.5em;
    }
  }
  #hp-update .ugc-banner h3 {
    text-transform: uppercase;
    font-size: 3.5em;
    padding-bottom: 2em;
    padding-left: 1em;
    line-height: 1.5;
  }
  
  @media (max-width: 640px) {
    #hp-update #ugc-banner section {
      width: 100vw !important;
    }
  }

  #hp-update .endorphin-collection .products .shoe:first-of-type h5 {
    font-family: unset;
    padding: 0;
}
  
  /*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22week-21.scss%22,%22utils/_mixins.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AAIA;EACE;;ACJA;EDGF;IAGI;;;ACAF;EDEA;IAEI;;;AAEF;EACE;EACA;EACA;EACA;EACA;;ACXJ;EDME;IAQI;IACA;IACA;;;AAEF;EACE;;AASN;EACE;EACA;EACA;EACA;EACA;EACA;;AClCF;ED4BA;IAQI;IACA;IACA;IACA;IACA;;;AC9CJ;EDkCA;IAeI;IACA;IACA;IACA;IACA;;;AAEF;EACE;;AClDJ;EDiDE;IAGI;;;AAGJ;EACE;EACA;EACA;;AChEJ;ED6DE;IAKI;;;AC5DN;EDuDE;IAQI;;;AAMN;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AC7FJ;EDgFA;IAgBI;IACA;IACA;IACA;IACA;IACA;IACA;;;;AAIN;EACE;IACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AC3HA;ED8HF;IAEI%22,%22file%22:%22week-21.css%22%7D */