/*----- Main -----*/

.main {
  margin-top: 55px;
  text-align: center;
}

.main .link {
  display: inline-block;
  padding: 8px 12px;
  border: 2px solid var(--black);
  border-radius: 10px;
  font-size: 1.8rem;
  text-decoration: none;
  text-align: center;
  background-color: transparent;
  transition: .4s;
}

main h1 {
  display: none;
}

.hero {
  padding-top: 40px;
  min-height: 520px;
  height: auto;
  background-color: var(--red);
}

.hero-banner {
  width: 100%;
}

.hero-banner picture {
  margin: 0 auto;
}

.hero-banner img {
  width: 100%;
  max-width: 800px;
}

.hero .heading {
  margin-bottom: 16px;
  font-size: 4.8rem;
  text-align: center;
  line-height: 40px;
  color: var(--white);
}

.hero .link {
  border: 1px solid var(--white);
  color: var(--white);
}

.products {
  padding-top: 52px;
}

.products h2 {
  margin-bottom: 16px;
  font-size: 4.8rem;
  text-align: center;
}

.products .link {
  color: var(--black);
  margin-bottom: 44px;
}

.products-card {
  width: 80%;
  min-width: 272px;
  max-width: 300px;
  padding-bottom: 16px;
  margin: 0 auto 36px;
}

.card-image {
  border: 2px solid var(--black);
  border-bottom: transparent;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.card-image img {
  width: 100%;
}

.card-details {
  border: 2px solid var(--black);
  border-top: transparent;
  padding: 18px 16px 20px;
  border-radius: 0 0 10px 10px;
}

.card-heading {
  margin-bottom: 16px;
  font-size: 3.6rem;
  text-align: left;
}

.card-link {
  display: inline-block;
  width: 100%;
  padding: 14px 0;
  border: 2px solid var(--black);
  font-size: 2rem;
  text-align: center;
  color: var(--white);
  border-radius: 4px;
  background-color: var(--off-black);
  transition: .3s;
} 

.farms {
  margin: 80px 0 60px;
}

.farms h2 {
  margin-bottom: 16px;
  font-size: 4.8rem;
  text-align: center;
}

.farms .link {
  color: var(--black);
  margin-bottom: 44px;
}

.farms-banner {
  width: 80%;
  min-width: 272px;
  max-width: 600px;
  margin: 0 auto;
}

.farms-banner img {
  width: 100%;
  border-radius: 10px;
}