body {
  width: 100%;
  max-width: 100vw;
}

body .hexagon {
  width: 100%;
  height: 100%;
  max-height: calc(100vw / 3.5);
  min-height: 70vh;
  position: absolute;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 30%, 97% 50%, 15% 100%, 0 60%);
          clip-path: polygon(0 0, 100% 0, 100% 30%, 97% 50%, 15% 100%, 0 60%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media only screen and (max-width: 1281px) and (min-width: 992px) {
  body .hexagon {
    max-height: calc(100vw / 2);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 95% 80%, 15% 100%, 0 80%);
            clip-path: polygon(0 0, 100% 0, 100% 60%, 95% 80%, 15% 100%, 0 80%);
  }
}

@media only screen and (max-width: 992px) and (min-width: 768px) {
  body .hexagon {
    max-height: calc(100vw / 2);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 95% 80%, 15% 100%, 0 80%);
            clip-path: polygon(0 0, 100% 0, 100% 60%, 95% 80%, 15% 100%, 0 80%);
  }
}

@media only screen and (max-width: 768px) and (min-width: 600px) {
  body .hexagon {
    min-height: 70vh;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 93% 90%, 15% 100%, 0 90%);
            clip-path: polygon(0 0, 100% 0, 100% 80%, 93% 90%, 15% 100%, 0 90%);
  }
}

@media only screen and (max-width: 600px) {
  body .hexagon {
    min-height: 70vh;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 93% 90%, 15% 100%, 0 90%);
            clip-path: polygon(0 0, 100% 0, 100% 80%, 93% 90%, 15% 100%, 0 90%);
  }
}
/*# sourceMappingURL=hexagon.css.map */