* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* SECTION */
.section1-bg {
  width: 100%;
  min-height: 100vh;
  background-image: url("/resources/Section1/Section1-BG.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* LOGO */
.logo-white-top {
  margin-top: clamp(6vh, 10vh, 16vh);
}

.logo-white-in {
  height: clamp(48px, 10vh, 120px);
}

/* SPOT THE GREEN */
.spot-the-green {
  margin-top: clamp(3vh, 6vh, 10vh);
}

.spot-the-green-in {
  height: clamp(48px, 10vh, 120px);
}

/* ILLUSTRATION */
.capture-illustration {
  margin-top: clamp(4vh, 8vh, 12vh);
}

.capture-illustration-in {
  height: clamp(220px, 45vh, 520px);
}

/* SMALL PHONES */
@media (max-width: 360px) {
  .logo-white-top {
    margin-top: 6vh;
  }

  .capture-illustration-in {
    height: 40vh;
  }
}

/* TABLETS */
@media (min-width: 768px) {
  .section1-bg {
    min-height: 120vh;
  }

  .logo-white-in,
  .spot-the-green-in {
    height: 16vh;
  }

  .capture-illustration-in {
    height: 70vh;
  }
}

/* LARGE DESKTOPS */
@media (min-width: 1280px) {
  .section1-bg {
    min-height: 140vh;
  }

  .logo-white-top {
    margin-top: 18vh;
  }

  .capture-illustration-in {
    height: 60vh;
  }
}