body.homepage-v2 header {
  opacity: 0;
  height: auto;
  padding: 0;
}

body.homepage-v2.header-small header {
  opacity: 1;
  padding: 16px 16px 16px 24px;
  height: 60px;
}

body.homepage-v2.header-small header a.homepage-link img {
  width: 32px;
}

body.mobile.homepage-v2 header #slogan {
  margin-top: 0;
}

section.hero {
  background-color: #E1E3E6;
  height: 100vh;
  min-height: 300px;
  width: 100%;
  display: grid;
  grid-template-columns: 9% 9% 18% 1fr 12.5% 9%;
  grid-template-rows: 14.8% 12.7% 12.6% 19.5% 7.7% 17.9% 14.8%;
  position: relative;
}

.hero img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: top;
}

.hero .star-logo {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.hero .title {
  grid-column: -2 / -3;
  grid-row: 2 / 3;
  display: flex;
  align-items: center;
}

.hero .slogan {
  grid-column: 2 / 4;
  grid-row: -2 / -3;
  padding-left: 16px;
}

.hero .avatar {
  grid-column: -2 / -3;
  grid-row: 4 / 5;
  padding: 0 20px 0 10px;
}

.hero .avatar img {
  position: absolute;
}

.hero .description {
  grid-column: -2 / -3;
  grid-row: -2 / -3;
  padding: 0 20px 0 10px;
}

body.mobile.homepage-v2.header-small header {
  height: auto;
}

body.mobile section.hero {
  grid-template-rows: 8.6% 7.5% 11% 28% 11.7% 8% 4% 13% 8.6%;
  grid-template-columns: 10.8% 21.1% 6.1% 25.3% 27.4% 9.3%;
}

body.mobile .hero .logo-and-slogan {
  grid-column: 2 / 6;
  grid-row: 2 / 3;
}

body.mobile .hero .slogan {
  grid-column: 2 / 6;
  grid-row: 4 / 5;
  padding-left: 0;
}

body.mobile .hero .avatar {
  grid-column: -3 / -2;
  grid-row: 6 / 8;
  padding: 0;
}

body.mobile .hero .description {
  grid-column: 2 / 5;
  grid-row: 7 / 9;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}

body.mobile .hero .down-arrow {
  grid-column: -3 / -2;
  grid-row: 8 / 9;
}

body.mobile .hero .down-arrow a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}