@font-face {
  font-family: "InterReg";
  src: url(assets/fonts/static/Inter-Regular.ttf);
}
@font-face {
  font-family: "InterBold";
  src: url(assets/fonts/static/Inter-Bold.ttf);
}
@font-face {
  font-family: "InterBoldX";
  src: url(assets/fonts/static/Inter-ExtraBold.ttf);
}
:root {
  --soft-red: rgb(241, 94, 80);
  --off-white: rgb(255, 253, 250);
  --soft-orange: rgb(233, 171, 83);
  --grayish-blue: rgb(197, 198, 206);
  --dark-grayish-blue: rgb(93, 95, 121);
  --very-dark-blue: rgb(0, 0, 26);
}

* {
  font-family: "InterReg", sans-serif;
}
/*#home {
  border: 1px solid red;
}*/
nav {
  background: white;
}

#home > div > div:last-of-type > h1 {
  font-size: 3.1rem;
  font-family: "InterBoldX", sans-serif;
  color: var(--very-dark-blue);
}

#home > div > div:last-of-type p {
  margin-top: 1.25rem;
  font-size: 1.15rem;
  line-height: 2rem;
  color: var(--dark-grayish-blue);
}
#home > div > div:last-of-type button {
  margin-top: 1rem;
  width: 14rem;
  height: 3.75rem;

  font-family: "InterBold", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.3rem;

  border: none;
  color: var(--off-white);
  background: var(--soft-red);
}
#home > div > div:last-of-type button:active {
  background: var(--very-dark-blue);
}
.d-headline-img-desktop {
  height: 22.5rem;
  min-width: 50.5rem;
  object-fit: contain;
  margin-top: 2.5rem;
}
.mobile-headline {
  margin-top: 5rem;
}
#new {
  padding-top: 3rem;
}
#new > div {
  padding: 0.5rem;
  background: var(--very-dark-blue);
}

#new > div > h2 {
  font-size: 2.5rem;
  font-family: "InterBold", sans-serif;
  color: var(--soft-orange);
}
#new > div > div:first-of-type {
  margin-top: 2.25rem;
}
#new > div > div:first-of-type,
#new > div > div:nth-of-type(2) {
  margin-bottom: 2.25rem;
}
#new > div > div:nth-of-type(2) > .text-container,
#new > div > div:nth-of-type(3) > .text-container {
  padding-top: 2.25rem;
  border-top: 1px solid var(--dark-grayish-blue);
}
#new > div > div:nth-of-type(3) > .text-container {
  margin-bottom: 1.5rem;
}
#new > div > div h3 {
  font-size: 1.5rem;
  font-family: "InterBold", sans-serif;
  color: var(--off-white);
}
#new > div > div p {
  font-size: 1rem;
  line-height: 2rem;
  color: var(--dark-grayish-blue);
}

#popular img {
  height: 10rem;
}

#popular > div > div {
  margin-top: 3.5rem;
  margin-bottom: 3rem;
}
.popular-text-content > h3,
.popular-text-content > h4 {
  font-family: "InterBold", sans-serif;
}
.popular-text-content > h3 {
  margin-top: -0.25rem;
  font-size: 2rem;
  color: var(--grayish-blue);
}
.popular-text-content > h4 {
  padding-top: 0.55rem;
  font-size: 1.25rem;
}
.popular-text-content > p {
  font-size: 1rem;
  padding-top: 1rem;
  color: var(--dark-grayish-blue);
}

@media (min-width: 768px) {
  #home {
    margin-top: 4.75rem;
  }
  .d-headline-img-desktop {
    min-width: 30rem;
    object-fit: contain;
    margin-top: 2.5rem;
    margin-left: auto;
    margin-right: auto;
  }
  .headline-text-content > h1 {
    margin-left: auto;
  }
}

@media (min-width: 1200px) {
  .d-headline-img-desktop {
    width: 47rem;
    object-fit: cover;
  }

  .headline-text-content > h1 {
    width: 65rem;
  }
}

@media (min-width: 1400px) {
  .d-headline-img-desktop {
    width: 53rem;
    object-fit: cover;
  }
  #popular {
    margin-left: -2rem;
    margin-top: 3rem;
  }
  .popular-text-content > p {
    font-size: 1rem;
    width: 15rem;
    color: var(--dark-grayish-blue);
  }
  #popular > div > div {
    margin: 0.5rem;
  }
}