main.page section.hero {
  background-color: var(--background-secondary);
  padding-top: var(--spacing-l);
  padding-bottom: var(--spacing-3-xl);
}
main.page section.hero .hero-content {
  display: flex;
  justify-content: space-between;
  padding: 40px 0px;
}
@media screen and (max-width: 768px) {
  main.page section.hero .hero-content {
    flex-direction: column-reverse;
    padding: var(--spacing-s) 0px;
  }
}
main.page section.hero .content {
  width: var(--col-5);
}
@media screen and (max-width: 768px) {
  main.page section.hero .content {
    width: 100%;
  }
}
main.page section.hero .thumbnail {
  width: var(--col-6);
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  main.page section.hero .thumbnail {
    width: 100%;
    height: 300px;
  }
}
main.page section.hero .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
main.page section.hero h1 {
  margin-bottom: 44px;
  margin-right: -500px;
  z-index: 2;
  position: relative;
}
@media screen and (max-width: 768px) {
  main.page section.hero h1 {
    margin-right: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
main.page section.hero p {
  color: var(--color-text-light);
}