.hexagons-container {
    width: 100%;
    height: 550px;
    margin: 0;
    padding: 0;
    position: relative;
    transform-origin: top left;
}

    .hexagons-container li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

/* Colors */
.bg--yellow {
    background-color: #ffd700;
}

.bg--red {
    background-color: #f9423a;
}

.bg--blue {
    background-color: #3a5dae;
}

.bg--pink {
    background-color: #d59ed7;
}

.bg--green {
    background-color: #49c5b1;
}

.bg--darkblue {
    background-color: #333f48;
}

.bg--purple {
    background-color: #7f56c5;
}

.bg--grey {
    background-color: #72747c;
}

.bg--lightgrey {
    background-color: #f1f2f2;
}

.bg--red .hexagon-content, .bg--red .hexagon-content a,
.bg--blue .hexagon-content, .bg--blue .hexagon-content a,
.bg--darkblue .hexagon-content, .bg--darkblue .hexagon-content a,
.bg--purple .hexagon-content, .bg--purple .hexagon-content a,
.bg--grey .hexagon-content, .bg--grey .hexagon-content a {
    color: #fff;
}
/* End colors */

.hexagon-wrapper {
    width: 165px;
    height: 165px;
    text-align: center;
    margin: 20px;
    position: relative;
    display: inline-block;
}

    /* Circle variation */
    .hexagon-wrapper.circle {
        border-radius: 50%;
        overflow: hidden;
    }
/* End Circle variation */

.hexagon {
    height: 100%;
    width: calc(100% * 0.57735);
    display: inline-block;
}

    .hexagon:before {
        position: absolute;
        top: 0;
        right: calc((100% / 2) - ((100% * 0.57735) / 2));
        background-color: inherit;
        height: inherit;
        width: inherit;
        content: '';
        transform: rotateZ(60deg);
    }

    .hexagon:after {
        position: absolute;
        top: 0;
        right: calc((100% / 2) - ((100% * 0.57735) / 2));
        background-color: inherit;
        height: inherit;
        width: inherit;
        content: '';
        transform: rotateZ(-60deg);
    }

.hexagon-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.hexagon-content {
    font-size: 18px;
}

    .hexagon-content a {
        text-decoration: none;
    }

        .hexagon-content a:hover {
            text-decoration: underline;
        }

.hexagon-item {
    position: absolute;
}

    .hexagon-item.position1 {
        top: 0;
        left: 300px;
        /*left: 50%;
    transform: translateX(-50%);*/
    }

    .hexagon-item.position2 {
        top: 85px;
        left: 153px;
        /*top: 10.7%;
    left: 19%;*/
    }

    .hexagon-item.position3 {
        top: 85px;
        left: 447px;
        /*top: 10.7%;
    left: 55.6%;*/
    }

    .hexagon-item.position4 {
        top: 170px;
        left: 300px;
        /*top: 21.3%;
    left: 50%;
    transform: translateX(-50%);*/
    }

    .hexagon-item.position5 {
        top: 170px;
        left: 6px;
        /*top: 21.3%;
    left: 0.6%;*/
    }

    .hexagon-item.position6 {
        top: 255px;
        left: 153px;
        /*top: 32%;
    left: 19%;*/
    }

    .hexagon-item.position7 {
        top: 340px;
        left: 300px;
        /*top: 42.7%;
    left: 50%;
    transform: translateX(-50%);*/
    }

    .hexagon-item.position8 {
        top: 255px;
        left: 447px;
        /*top: 32%;
    left: 55.6%;*/
    }

    .hexagon-item.position9 {
        top: 170px;
        left: 595px;
        /*top: 21.3%;
    left: 74%;*/
    }

@media screen and (max-width: 991px) {
    .hexagons-container {
        margin-bottom: 10%;
    }
}

@media screen and (max-width: 767px) {
    .hexagon-item.position5 {
        top: 255px;
        left: 153px;
    }

    .hexagon-item.position6 {
        top: 255px;
        left: 447px;
    }

    .hexagon-item.position8 {
        top: 426px;
        left: 153px;
    }

    .hexagon-item.position9 {
        top: 426px;
        left: 447px;
    }
}

@media screen and (max-width: 415px) {
    .hexagons-container {
        height: 460px;
        transform: scale(0.8) translateX(-158px) !important;
    }
}

@media screen and (max-width: 375px) {
    .hexagons-container {
        transform: scale(0.7) translateX(-152px) !important;
    }
}

@media screen and (max-width: 320px) {
    .hexagons-container {
        transform: scale(0.6) translateX(-155px) !important;
    }
}