/**************************/
/* Font Face */
/**************************/

@font-face {
  font-family: "WNTL";
  font-style: bold;
  font-weight: 900;
  src:
    local("Wintle_Text_Web_Bold"),
    local("Wintle_Text_Web_Bold"),
    url(https://www.rocketmortgage.com/nsassets/fonts/Wintle_Text_Web_Bold.woff2)
      format("woff2"),
    url(https://www.rocketmortgage.com/nsassets/fonts/Wintle_Text_Web_Bold.woff)
      format("woff");
}
@font-face {
  font-family: "WNTL";
  font-style: demibold;
  font-weight: 700;
  src:
    local("Wintle_Text_Web_DemiBold"),
    local("Wintle_Text_Web_DemiBold"),
    url(https://www.rocketmortgage.com/nsassets/fonts/Wintle_Text_Web_DemiBold.woff2)
      format("woff2"),
    url(https://www.rocketmortgage.com/nsassets/fonts/Wintle_Text_Web_DemiBold.woff)
      format("woff");
}
@font-face {
  font-family: "WNTL";
  font-style: medium;
  font-weight: 500;
  src:
    local("Wintle_Text_Web_Medium"),
    local("Wintle_Text_Web_Medium"),
    url(https://www.rocketmortgage.com/nsassets/fonts/Wintle_Text_Web_Medium.woff2)
      format("woff2"),
    url(https://www.rocketmortgage.com/nsassets/fonts/Wintle_Text_Web_Medium.woff)
      format("woff");
}
@font-face {
  font-family: "WNTL";
  font-style: normal;
  font-weight: 400;
  src:
    local("Wintle_Text_Web_Regular"),
    local("Wintle_Text_Web_Regular"),
    url(https://www.rocketmortgage.com/nsassets/fonts/Wintle_Text_Web_Regular.woff2)
      format("woff2"),
    url(https://www.rocketmortgage.com/nsassets/fonts/Wintle_Text_Web_Regular.woff)
      format("woff");
}

/**************************/
/* General */
/**************************/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  font-family: "WNTL", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #2c2e35;
  overflow-x: hidden;
}
.container {
  /* 1140px */
  max-width: 122.4rem;
  padding: 0 7.6rem;
  margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 4rem;
}

/**************************/
/* Logo */
/**************************/
.section-logo {
  margin-top: 7rem;
}
.logo {
  height: 4.9rem;
}

/**************************/
/* Hero */
/**************************/
.section-hero {
  margin-top: 3rem;
}
.hero-title {
  font-size: 7.6rem;
  line-height: 1;
  font-weight: 900;
  text-align: left;
  letter-spacing: -0.1px;
  margin-bottom: 2.4rem;
}
.hero-copy {
  font-size: 2.4rem;
  line-height: 1.25;
  font-weight: 400;
  text-align: left;
}
.hero {
  width: 100%;
  height: auto;
  border-radius: 2rem;
}

/**************************/
/* Content */
/**************************/

.section-content {
  margin-top: 4rem;
}
.content-title {
  font-size: 4.4rem;
  line-height: 1;
  font-weight: 900;
  text-align: left;
}
.content-flex {
  display: flex;
  flex-direction: row;
  column-gap: 2.4rem;
  margin-top: 3rem;
}
.content-icon {
  height: 3.8rem;
  display: block;
  margin-top: 0.4rem;
}
.content-copy {
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 400;
  text-align: left;
}
.content-weight {
  font-weight: 900;
}
.content-card {
  background-color: #ff422a;
  padding: 3rem 1.2rem;
  border-radius: 2rem;
}
.content-card-title {
  font-size: 4rem;
  line-height: 1.05;
  font-weight: 900;
  text-align: left;
  color: #ffffff;
  letter-spacing: -0.4px;
}
.content-card-title2 {
  font-size: 2.8rem;
  line-height: 1.05;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  letter-spacing: -0.4px;
  padding-top: 2.4rem;
}
.card-link:link,
.card-link:visited {
  text-decoration: none;
  font-size: 2.8rem;
  color: #ffffff;
  transition: all 0.3s;
}
.card-link:hover,
.card-link:active {
  color: #ffffff;
  text-decoration: underline;
}
.card-link:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}

/**************************/
/* Footer */
/**************************/

.footer-container {
  /* 1140px */
  max-width: 122.4rem;
  padding: 0 5rem;
  margin: 0 auto;
}
.section-footer {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.footer-copy {
  color: #677171;
  font-size: 1.6rem;
  line-height: 1.2;
  text-align: left;
  letter-spacing: -0.5px;
  margin-bottom: 0.4rem;
}
.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: #677171;
  transition: all 0.3s;
}
.footer-link:hover,
.footer-link:active {
  color: #677171;
  text-decoration: underline;
}
.footer-link:focus {
  outline: 2px solid #ff422a;
  outline-offset: 2px;
  border-radius: 2px;
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
  html {
    /* 9px / 16px  */
    font-size: 56.25%;
  }
  .hero-title {
    font-size: 6.2rem;
  }
  .hero-copy {
    font-size: 2.2rem;
  }
  .content-title {
    font-size: 4rem;
  }
  .content-copy {
    font-size: 2.2rem;
  }
  .content-card-title {
    font-size: 3.6rem;
  }
  .content-card-title2 {
    font-size: 2.4rem;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }
  .container {
    max-width: none;
    padding: 0 4.2rem;
  }
  .hero-title {
    font-size: 5.8rem;
  }
  .hero-copy {
    font-size: 2rem;
  }
  .content-title {
    font-size: 3.4rem;
  }
  .content-copy {
    font-size: 2rem;
  }
  .content-card-title {
    font-size: 3.2rem;
  }
  .content-card-title2 {
    font-size: 2.2rem;
  }
  .footer-container {
    max-width: none;
    padding: 0 3.2rem;
  }
}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .section-hero .grid div:nth-child(2) {
    grid-row: 1;
  }
  .section-hero .grid div:nth-child(1) {
    grid-row: 2;
  }
  .hero-title {
    margin-top: 3rem;
  }
  .content-card {
    margin-top: 3rem;
  }
  .footer-copy {
    font-size: 1.4rem;
  }
  .card-link {
    word-wrap: break-word;
    word-break: break-word;
  }
  .content-card {
    padding: 3rem 3rem;
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/
@media (max-width: 34em) {
  .logo {
    height: 4.2rem;
  }
  .section-logo {
    margin-top: 4rem;
    padding-bottom: 1rem;
  }
}

/**************************/
/* BELOW 416px (Phones) */
/**************************/
@media (max-width: 26em) {
  .container {
    padding: 0 3.6rem;
  }
  .logo {
    height: 3.6rem;
  }
  .hero-title {
    font-size: 5.4rem;
  }
  .hero-copy {
    font-size: 1.8rem;
  }
  .content-title {
    font-size: 3rem;
  }
  .content-copy {
    font-size: 1.8rem;
  }
  .content-card-title {
    font-size: 2.8rem;
  }
  .content-card-title2 {
    font-size: 2rem;
  }
  .footer-copy {
    font-size: 1.3rem;
  }
  .footer-container {
    max-width: none;
    padding: 0 2.8rem;
  }
}

/**************************/
/* BELOW 352px (Phones) */
/**************************/
@media (max-width: 22em) {
  .logo {
    width: 100%;
    height: auto;
    padding-right: 6rem;
    display: block;
  }
  .hero-title {
    font-size: 4.8rem;
  }
}

/**************************/
/* Dark */
/**************************/
/*
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
}
*/