:root {
  --main-color: #707070;
  --secondary-color: #888888;
  --third-color: #00000029;
  --basic: #ffffff;
}

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/*START OF HEADER*/
header {
  background: -webkit-linear-gradient(100deg,
      rgb(255, 255, 255) 40%,
      rgba(112, 112, 112, 1) 0%);
  font-family: "Helvetica", sans-serif;
  height: 24.939rem;
  margin-bottom: 0.625rem;
  padding-top: 0.125rem;
  text-align: center;
  top: 0;
}

.title-1 {
  color: var(--basic);
  font-size: 1.25rem;
  width: auto;
}

.title-2 {
  color: var(--basic);
  font-size: 2.5rem;
  width: auto;
}

.title-3 {
  color: var(--basic);
  font-size: 0.875rem;
  width: auto;
}

.nav-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 48.0625rem;
  margin: 0 auto;
  margin-top: 3.125rem;
}

.nav-btns button {
  background-color: var(--basic);
  border: var(--main-color) solid 1px;
  border-radius: 4px;
  text-align: center;
  color: var(--secondary-color);
  width: 10rem;
  height: 2.5rem;
}
/*END OF HEADER*/

/*START OF MAIN*/
.section-1 {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 60vw;
}

.section-1 article {
  color: var(--secondary-color);
  margin-right: 60px;
  width: 60vw;
}

.section-1 h3 {
  font: 1.25rem "Helvetica", sans-serif;
  text-align: left;
}

.section-1 p {
  font: 0.75rem "Helvetica", sans-serif;
  text-align: left;
}

.section-1 form {
  width: 40vw;
}

label {
  font-family: "Helvetica", sans-serif;
  font-size: 0.75rem;
  padding: 0.625rem;
}

.input-1 {
  height: 1.875rem;
  margin: 2%;
  width: 100%;
}

.section-1 form label {
  color: var(--secondary-color);
  font-family: "Helvetica", sans-serif;
  padding: 0.625rem;
}

.submit-1 {
  align-content: center;
  background: var(--basic) 0% 0% no-repeat padding-box;
  border-radius: 4px;
  border: 1px solid var(--main-color);
  color: var(--secondary-color);
  cursor: pointer;
  height: 2.4375rem;
  margin-bottom: 79px;
  margin-left: 10px;
  margin-top: 20px;
  width: 100%;
}

.card-list {
  color: var(--secondary-color);
  display: grid;
  grid-gap: 1.875rem;
  grid-template-columns: auto auto auto auto;
  justify-content: center;
  margin-top: 3.125rem;
  margin: 0 auto;
  width: auto;
}

.prod-img {
  min-width: 12.5rem;
}

.prod-name {
  font: 0.875rem "Helvetica", sans-serif;
}

.prod-desc {
  font: 0.75rem "Helvetica", sans-serif;
  width: 12.5rem;
}

.old-price {
  font: 0.75rem "Helvetica", sans-serif;
}

.price {
  font: bold 1rem "Helvetica", sans-serif;
}

.inst {
  font: 0.75rem "Helvetica", sans-serif;
}

.purchase-btn {
  background: var(--basic) 0% 0% no-repeat padding-box;
  border-radius: 4px;
  border: 1px solid var(--main-color);
  color: var(--secondary-color);
  cursor: pointer;
  height: 1.875rem;
  width: 12.5rem;
}

#more-products {
  display: flex;
  justify-content: center;
  margin-bottom: 128px;
  margin-top: 58px;
}

.next-btn {
  background: var(--basic) 0% 0% no-repeat padding-box;
  border-radius: 4px;
  border: 1px solid var(--main-color);
  color: var(--secondary-color);
  cursor: pointer;
  height: 2.438rem;
  width: 16.25rem;
}

h2 {
  color: var(--secondary-color);
  font: bold 1.125rem "Helvetica", sans-serif;
  margin-top: 0.625rem;
  position: relative;
  text-align: center;
  z-index: 1;
}

h2:before {
  border-top: 1px solid var(--secondary-color);
  bottom: 0;
  content: "";
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 0.625rem;
  width: 60vw;
  z-index: -1;
}

h2 span {
  background: var(--basic);
  padding: 0 15px;
}

.newsletter {
  margin: 0 auto;
  text-align: center;
}

.newsletter p {
  color: var(--secondary-color);
  font: 0.875rem "Helvetica", sans-serif;
  margin-bottom: 2.438rem;
  margin-top: 2.75rem;
}

.form-news {
  background: var(--basic) 0% 0% no-repeat padding-box;
  border: 1px solid var(--main-color);
  margin: 10px 10px;
  opacity: 1;
  width: 21.25rem;
}

.newsletter label {
  color: var(--secondary-color);
  font: 0.75rem "Helvetica", sans-serif;
}

#news-btn {
  align-content: center;
  background: #ffffff 0% 0% no-repeat padding-box;
  border-radius: 4px;
  border: 1px solid var(--secondary-color);
  color: var(--secondary-color);
  cursor: pointer;
  height: 2.438rem;
  margin: 0 auto;
  width: 16.25rem;
}
/*END OF MAIN*/

/*START OF FOOTER*/
footer {
  background-color: var(--main-color);
  height: 293.24px;
  left: 0px;
  top: 134.438rem;
  margin-top: 4.485rem;
  width: 100%;
}

footer p {
  color: var(--basic);
  font: 0.75rem "Helvetica", sans-serif;
  line-height: 1.125rem;
  position: relative;
  top: 9.8275rem;
  text-align: center;
}
/*END OF FOOTER*/

/*RESPONSIVENESS*/
@media only screen and (max-width: 768px) {
  .nav-btns {
    display: grid;
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
  }

  .section-1 {
    flex-wrap: wrap;
    margin: 0 auto;
  }

  h2:before {
    border-top: 1px solid var(--secondary-color);
    bottom: 0;
    content: "";
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 10px;
    width: auto;
    z-index: -1;
  }

  .card-list {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    margin: 0.625rem;
  }

  .newsletter form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    width: 50vw;
  }

  #news-btn {
    margin-top: 3.125rem;
  }
}

@media only screen and (max-width: 420px) {
  header {
    height: auto;
    padding-bottom: 69px;
    text-align: left;
    width: 100vw;
  }

  .title-1 {
    margin: 66px 10px 0px;
  }

  .title-2 {
    margin: 0px 10px;
  }

  .title-3 {
    margin: 10px 9px 56px;
  }

  .nav-btns {
    display: grid;
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: center;
    margin-bottom: 69px;
    width: auto;
  }

  .card-list {
    display: grid;
    grid-template-columns: auto;
    justify-content: start;
    margin: 0.625rem;
  }

  .prod-img {
    min-width: 12.5rem;
  }

  .prod-name {
    font: 0.875rem "Helvetica", sans-serif;
  }

  .prod-desc {
    font: 0.75rem "Helvetica", sans-serif;
    width: auto;
  }

  .old-price {
    font: 0.75rem "Helvetica", sans-serif;
  }

  .price {
    font: bold 1rem "Helvetica", sans-serif;
  }

  .inst {
    font: 0.75rem "Helvetica", sans-serif;
  }

  .purchase-btn {
    width: 100%;
  }

  .prod-card:nth-child(n + 5):nth-child(-n + 8) {
    display: none;
  }

  .section-1 {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 90vw;
  }

  .section-1 form {
    width: auto;
    margin: 2%;
  }

  .section-1 article {
    width: 100vw;
    margin: 2%;
  }

  h2:before {
    border-top: 1px solid var(--secondary-color);
    bottom: 0;
    content: "";
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 10px;
    width: auto;
    z-index: -1;
  }

  .newsletter {
    width: auto;
  }

  footer {
    width: 100vw;
  }
}

@media only screen and (max-width: 360px) {
  header {
    height: auto;
    padding-bottom: 69px;
    text-align: left;
    width: 100vw;
  }

  .title-1 {
    margin: 66px 10px 0px;
  }

  .title-2 {
    margin: 0px 10px;
  }

  .title-3 {
    margin: 10px 9px 56px;
  }

  .nav-btns {
    display: grid;
    grid-column-gap: 1.25rem;
    grid-row-gap: 1.25rem;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    justify-content: center;
    margin-bottom: 69px;
    width: auto;
  }

  .card-list {
    display: grid;
    grid-template-columns: 90vw;
    justify-content: start;
    margin: 20px;
  }

  .prod-img {
    min-width: 12.5rem;
  }

  .prod-name {
    font: 0.875rem "Helvetica", sans-serif;
  }

  .prod-desc {
    font: 0.75rem "Helvetica", sans-serif;
    width: 90vw;
  }

  .old-price {
    font: 0.75rem "Helvetica", sans-serif;
  }

  .price {
    font: bold 1rem "Helvetica", sans-serif;
  }

  .inst {
    font: 0.75rem "Helvetica", sans-serif;
  }

  .purchase-btn {
    width: 100%;
  }

  .prod-card:nth-child(n + 5):nth-child(-n + 8) {
    display: none;
  }

  .section-1 {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 90vw;
  }

  .section-1 form {
    width: auto;
    margin: 2%;
  }

  .section-1 article {
    width: 100vw;
    margin: 2%;
  }

  h2:before {
    border-top: 1px solid var(--secondary-color);
    bottom: 0;
    content: "";
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 10px;
    width: auto;
    z-index: -1;
  }

  .newsletter {
    width: 90vw;
  }

  .newsletter form input {
    width: 80vw;
  }

  footer {
    width: auto;
  }
}