#hero {
  width: 100%;
  height: 400px;
  background-color: var(--primary-color);
}
@media (min-width: 360px) {
  #hero {
    height: 630px;
  }
}

#hero .section-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
#hero img {
  width: 200px;
  height: auto;
}
@media (min-width: 360px) {
  #hero img {
    width: 276px;
  }
}