:root {
  --header-height: 6.7rem;
}
@media (width > 768px) {
  :root {
    --header-height: 11.2rem;
  }
}

.hue-info {
  padding: 6.4rem 2.8rem;
  height: 35.8rem;
}
@media (width > 768px) {
  .hue-info {
    padding: 6.4rem 3.3rem;
    height: 26.6rem;
  }
}
.hue-info.dark-text .hue-info-content-text h2, .hue-info.dark-text .hue-info-content-text p {
  color: var(--black-main, #333032);
}
.hue-info.light-text .hue-info-content-text h2, .hue-info.light-text .hue-info-content-text p {
  color: var(--white-main, #FFF);
}
.hue-info .hue-info-content {
  display: flex;
  align-items: center;
}
.hue-info .hue-info-content .hue-info-content-text {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: 100%;
}
@media (width > 768px) {
  .hue-info .hue-info-content .hue-info-content-text {
    flex-direction: column;
    gap: unset;
  }
}
.hue-info .hue-info-content .hue-info-content-text .hue-info-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.hue-info .hue-info-content .hue-info-content-text h2 {
  text-align: right;
  font-family: Simpler;
  font-size: 3rem;
  font-weight: 900;
  line-height: 110%;
  margin-bottom: 2.4rem;
}
@media (width > 768px) {
  .hue-info .hue-info-content .hue-info-content-text h2 {
    margin-bottom: 1.2rem;
    font-size: 3.5rem;
    text-align: right;
  }
}
.hue-info .hue-info-content .hue-info-content-text p {
  text-align: right;
  font-family: Simpler;
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  margin-bottom: 2.4rem;
}
@media (width > 768px) {
  .hue-info .hue-info-content .hue-info-content-text p {
    font-size: 1.8rem;
    text-align: right;
  }
}
.hue-info .hue-info-content .hue-info-content-button {
  display: flex;
  align-self: flex-start;
}
@media (width > 768px) {
  .hue-info .hue-info-content .hue-info-content-button {
    align-self: flex-end;
  }
}
.hue-info .hue-info-content .hue-info-content-button .hue-info-button {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 2.4rem;
  border-radius: 0.4rem;
  font-family: Simpler;
  font-size: 1.6rem;
  font-weight: 400;
  text-decoration: none;
  background-color: var(--black-main, #333032);
  color: var(--white-main, #FFF);
  border: 1px solid var(--black-main, #333032);
  transition: all 0.3s ease;
}
.hue-info .hue-info-content .hue-info-content-button .hue-info-button svg {
  width: 1.6rem;
  height: 1.6rem;
}