header {
  background-size: cover;
  background-position: 40%;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.8),
      rgba(0, 0, 0, 0.8)
    ),
    url("/assets/header.jpg");
}

.header-center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-transform: uppercase;
}

.header-center h1 {
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px #372f23;
  color: var(--theme-colors-white);
  font-family: var(--theme-fonts-lato);
}

.header-center div {
  border-radius: var(--header-radius);
  background-color: rgba(255, 255, 255, 0.9);
}

.header-center div form {
  display: flex;
  flex-direction: column;
}

.header-center div form label,
.header-center div form input {
  margin-bottom: 0.4rem;
}

.header-center div form label,
.header-center div form input,
.header-center div form button {
  border-radius: var(--header-radius);
}

.header-center div form input {
  padding: 0.6rem;
  border: 1px solid var(--theme-colors-red);
}

.header-center div form input,
.header-center div form button {
  outline: none;
}

.header-center div form button {
  outline-color: black;
  border: none;
  padding: 0.6rem;
  text-transform: uppercase;
  color: var(--theme-colors-white);
  background-color: var(--theme-colors-red);
}

.product-description {
  padding: 4rem 1rem;
  counter-reset: product-steps;
}

.product-description h2 {
  text-align: center;
  margin: 0 0 4rem 0;
  color: var(--theme-colors-red);
}

.product-description h2,
.product-description h3 {
  text-transform: uppercase;
}

.product-description-wrapper {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

.product-description-step {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  flex-direction: column;
}

.product-description-icon img {
  width: auto;
  height: 40px;
}

.product-description-step h3 {
  color: var(--theme-colors-red);
}

.product-description-step h3::before {
  color: black;
  counter-increment: product-steps;
  content: counter(product-steps) ": ";
}

.product-description-step h3,
.product-description-step p {
  margin: 1rem;
}

.product-description-step p {
  max-width: 26rem;
  text-align: center;
}

.product-description-step a {
  color: black;
}

/*! Mobile: <= 768px */
@media screen and (max-width: 768px) {
  header {
    height: calc(100vh - var(--nav-height));
  }

  .header-center {
    padding: 0 1rem;
  }

  .header-center div {
    padding: 1rem 0.4rem;
    margin-bottom: var(--nav-height);
  }

  section {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/*! Tablet: > 768px && < 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  header {
    background-position: top;
    height: calc(70vh - var(--nav-height));
  }

  .header-center {
    justify-content: flex-end;
    padding: calc(var(--nav-height) / 4) 0;
  }

  .header-center div {
    padding: 1rem;
  }

  section {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/*! Mobile and Tablet */
@media screen and (max-width: 1024px) {
  .product-description-wrapper {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(1, 1fr);
  }
}

/*! Desktop: >= 1024px */
@media screen and (min-width: 1024px) {
  header {
    height: calc(80vh - var(--nav-height));
  }

  .header-center div {
    padding: 2rem;
  }
}