main {
  overflow: hidden;
}
@media (min-width: 1280px) {
  main {
    display: grid;
    grid-template-columns: 1fr repeat(12, 56px) 1fr;
  }
}
main > header {
  height: 30rem;
  max-height: none;
  display: block;
}
@media (min-width: 1280px) {
  main > header {
    padding: 0;
    height: 540px;
  }
}
@media (min-width: 1280px) and (min-height: 800px) {
  main > header {
    height: 620px;
  }
}
@media (min-width: 1280px) and (min-height: 900px) {
  main > header {
    height: 780px;
  }
}
@media (min-width: 1280px) and (min-height: 1024px) {
  main > header {
    height: 945px;
  }
}
main > header::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(var(--blue), var(--blue-20));
  z-index: 2;
}
@media (min-width: 1280px) {
  main > header::before {
    display: none;
  }
}
main > header h1 {
  z-index: 4;
  font-size: 60px;
  position: absolute;
  top: calc(290px - max(0px, 100vw - 375px) * 0.05);
  left: calc(1.8rem + max(0px, 100vw - 375px) / 2);
  width: 13rem;
}
main > header h1 strong {
  font-weight: 500;
  color: var(--yellow);
}
@media (min-width: 1280px) {
  main > header h1 {
    font-size: 100px;
    top: 170px;
    left: calc(50vw - 512px + 88px + 0px);
    width: 4.5em;
    line-height: 0.9em;
  }
}
@media (min-width: 1280px) and (min-height: 800px) {
  main > header h1 {
    left: calc(50vw - 512px + 0px + 0px);
    top: 220px;
    font-size: 115px;
  }
}
@media (min-width: 1280px) and (min-height: 900px) {
  main > header h1 {
    top: 280px;
    font-size: 125px;
  }
}
@media (min-width: 1280px) and (min-height: 1024px) {
  main > header h1 {
    left: calc(50vw - 512px + 0px + 0px - 88px);
    top: 320px;
    font-size: 140px;
  }
}
main > header .cup {
  position: absolute;
  top: 44px;
  left: calc(160px + max(0px, 100vw - 375px) / 1.9);
  z-index: 3;
  width: 340px;
  height: 500px;
}
main > header .cup svg .line {
  stroke: var(--yellow);
  vector-effect: non-scaling-stroke;
}
@media (min-width: 1280px) {
  main > header .cup {
    left: calc(50vw - 512px + 440px + 0px);
    top: 20px;
    width: auto;
    height: 420px;
  }
  main > header .cup svg {
    height: 100%;
  }
}
@media (min-width: 1280px) and (min-height: 800px) {
  main > header .cup {
    left: calc(50vw - 512px + 352px + 56px);
    top: 30px;
    height: 470px;
  }
}
@media (min-width: 1280px) and (min-height: 900px) {
  main > header .cup {
    left: calc(50vw - 512px + 440px + 0px);
    top: 30px;
    height: 540px;
  }
}
@media (min-width: 1280px) and (min-height: 1024px) {
  main > header .cup {
    left: calc(50vw - 512px + 352px + 56px);
    top: 30px;
    height: 590px;
  }
}
main > header .lid {
  position: absolute;
  left: calc(-160px + max(0px, 100vw - 375px) * 0.15);
  bottom: calc(-176px + max(0px, 100vw - 375px) * 0.1);
  z-index: 3;
  width: 340px;
  height: 340px;
}
main > header .lid svg .line {
  stroke: var(--white);
}
@media (min-width: 1280px) {
  main > header .lid {
    left: calc(50vw - 512px + 264px + 0px);
    top: 460px;
    width: 260px;
    height: 260px;
  }
}
@media (min-width: 1280px) and (min-height: 800px) {
  main > header .lid {
    left: calc(50vw - 512px + 176px + 0px);
    top: 490px;
    width: 280px;
    height: 280px;
  }
}
@media (min-width: 1280px) and (min-height: 900px) {
  main > header .lid {
    top: 620px;
    width: 310px;
    height: 310px;
  }
}
@media (min-width: 1280px) and (min-height: 1024px) {
  main > header .lid {
    top: 670px;
    width: 340px;
    height: 340px;
  }
}
main > header .arrow {
  display: none;
  position: absolute;
  width: 20px;
  height: 100px;
  z-index: 3;
}
main > header .arrow svg .line {
  stroke: var(--white);
}
@media (min-width: 1280px) {
  main > header .arrow {
    display: block;
    left: calc(50vw - 512px + 704px + 0px);
    top: calc(100% - 50px);
  }
}
main > header img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
@media (min-width: 1280px) {
  main > header img {
    top: 120px;
    left: calc(50vw - 512px + 616px + 0px);
    width: 360px;
    height: 360px;
  }
}
@media (min-width: 1280px) and (min-height: 800px) {
  main > header img {
    top: 140px;
    width: 400px;
    height: 400px;
  }
}
@media (min-width: 1280px) and (min-height: 900px) {
  main > header img {
    top: 220px;
    width: 440px;
    height: 440px;
  }
}
@media (min-width: 1280px) and (min-height: 1024px) {
  main > header img {
    top: 260px;
    width: 480px;
    height: 480px;
  }
}

.trash {
  position: relative;
  background: var(--black);
  padding-top: calc(330px - max(0px, 100vw - 375px) * 0.2);
  padding-bottom: 80px;
  grid-column: 1/-1;
}
@media (min-width: 1280px) {
  .trash {
    padding-top: 440px;
    padding-bottom: 120px;
  }
}
.trash .text {
  color: var(--white);
  margin-left: calc(max(0px, 100vw - 375px) * 0.2);
  margin-bottom: calc(max(0px, 100vw - 375px) * 0.05);
  position: relative;
  z-index: 4;
  max-width: 16rem;
}
@media (min-width: 1280px) {
  .trash .text {
    grid-column: 8/span 4;
    margin-left: 0;
    margin-bottom: 0;
  }
}
.trash .cup-waste {
  position: absolute;
  top: 60px;
  left: calc(156px + max(0px, 100vw - 375px) * 0.75);
  z-index: 3;
  width: 240px;
  height: 240px;
}
@media (min-width: 1280px) {
  .trash .cup-waste {
    top: 160px;
    left: 50vw;
  }
}
.trash .cup-waste svg .line {
  stroke: var(--white);
}
.trash .cup-waste svg .fill {
  fill: var(--white);
}
.trash .cup-waste svg .line.line--highlighted {
  stroke: var(--yellow);
}
.trash .cup-waste svg .fill.fill--highlighted {
  fill: var(--yellow);
}
.trash img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
@media (min-width: 1280px) {
  .trash img {
    bottom: -60px;
    top: unset;
    left: calc(50vw - 512px - 88px + 0px);
    width: 496px;
    height: 496px;
  }
}

.solution {
  position: relative;
  padding-top: calc(260px - max(0px, 100vw - 375px) * 0.1);
  padding-bottom: 2rem;
  grid-column: 1/-1;
}
@media (min-width: 1280px) {
  .solution {
    padding: 540px 0 230px;
    overflow: hidden;
  }
}
.solution .text {
  max-width: 16rem;
  margin-left: calc(max(0px, 100vw - 375px) * 0.55);
  margin-bottom: calc(max(0px, 100vw - 375px) * 0.1);
}
@media (min-width: 1280px) {
  .solution .text {
    grid-column: 3/span 4;
    margin: 0;
  }
}
.solution .cup-wheel {
  position: absolute;
  top: -60px;
  left: -50px;
  z-index: 3;
  width: calc(260px + max(0px, 100vw - 375px) * 0.15);
  height: auto;
  transform: rotate(30deg);
}
@media (min-width: 1280px) {
  .solution .cup-wheel {
    top: 100px;
    left: calc(496px + (100vw - 1024px) * 0.5);
    width: 680px;
  }
}
.solution .cup-250 {
  position: absolute;
  top: calc(60px + max(0px, 100vw - 375px) * 0.075);
  right: calc(26px + max(0px, 100vw - 375px) * 0.15);
  z-index: 3;
  width: 102px;
  height: 150px;
}
@media (min-width: 1280px) {
  .solution .cup-250 {
    top: 260px;
    left: calc(88px + (100vw - 1024px) * 0.5);
    width: auto;
    height: 220px;
  }
  .solution .cup-250 svg {
    width: auto;
    height: 220px;
  }
}
.solution .cup-250 .line {
  stroke: var(--blue);
  vector-effect: non-scaling-stroke;
}
.solution .cup-250 .fill {
  fill: var(--blue);
}

.details {
  position: relative;
  background: var(--yellow);
  padding-top: 270px;
  padding-bottom: 2rem;
  grid-column: 1/-1;
}
@media (min-width: 1280px) {
  .details {
    padding-top: 390px;
    padding-bottom: 96px;
  }
}
.details .text {
  position: relative;
  z-index: 4;
  margin-left: calc(max(0px, 100vw - 375px) * 0.2);
  max-width: 16rem;
}
.details .text > p {
  max-width: 8.5rem;
}
@media (min-width: 1280px) {
  .details .text {
    grid-column: 8/span 4;
    margin-left: 0;
  }
  .details .text > p {
    max-width: 16rem;
  }
}
.details .cup-check {
  position: absolute;
  top: 60px;
  left: calc(1.8rem + max(0px, 100vw - 375px) * 0.2);
  z-index: 3;
  width: 102px;
  height: 150px;
}
@media (min-width: 1280px) {
  .details .cup-check {
    top: 120px;
    left: calc(528px + (100vw - 1024px) * 0.5);
    width: auto;
    height: 206px;
  }
  .details .cup-check svg {
    width: auto;
    height: 206px;
  }
}
.details .cup-check .line {
  stroke: var(--blue);
  vector-effect: non-scaling-stroke;
}
.details .cup-stack {
  position: absolute;
  top: 60px;
  right: calc(1.8rem + max(0px, 100vw - 375px) * 0.8);
  z-index: 3;
  width: 102px;
  height: 262px;
}
.details .cup-stack .cup-2 {
  opacity: 0.6;
}
.details .cup-stack .cup-3 {
  opacity: 0.2;
}
@media (min-width: 1280px) {
  .details .cup-stack {
    top: 64px;
    left: calc(740px + (100vw - 1024px) * 0.5);
  }
  .details .cup-stack .cup-1 {
    opacity: 0.2;
  }
  .details .cup-stack .cup-3 {
    opacity: 1;
  }
}
.details .cup-stack .line {
  stroke: var(--black);
}
.details img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
@media (min-width: 1280px) {
  .details img {
    top: -60px;
    left: calc(50vw - 512px - 88px + 0px);
    width: 496px;
    height: 496px;
  }
}

/*# sourceMappingURL=home.css.map */