* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  cursor: pointer !important;
}
div {
  position: relative;
}
img,
picture {
  display: block;
  width: 100%;
}

.contactButton {
  position: absolute;
  width: 25%;
  height: 50%;
  left: 37.5%;
  top: 25%;
}

.course1,
.course2,
.course3 {
  position: absolute;
  width: 23%;
  height: 53%;
  top: 31%;
}

.course1 {
  left: 10.3%;
}

.course2 {
  left: 38.4%;
}

.course3 {
  left: 66.5%;
}

.footer {
  margin-bottom: 10%;
}

@media only screen and (max-width: 480px) {
  .contactButton {
    width: 90%;
    height: 35%;
    left: 5%;
    top: 32%;
  }

  .course1,
  .course2,
  .course3 {
    width: 90%;
    height: 23.5%;
    left: 5%;
  }

  .course1 {
    top: 13%;
  }

  .course2 {
    top: 41%;
  }

  .course3 {
    top: 68.7%;
  }
}

.img-desktop {
  display: block;
  width: 100%;
}
.img-mobile {
  display: none;
  width: 100%;
}

@media (max-width: 768px) {
  .img-desktop {
    display: none;
  }
  .img-mobile {
    display: block;
  }
}