#hexagonGrid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(9, 1fr);
    /* width: 100%; */
    margin: 0 auto;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    list-style-type: none;
    overflow: hidden;
    padding: 30px;
}

.hex {
    grid-column-end: span 2;
    position: relative;
    visibility: hidden;
    outline: 1px solid transparent;
}

.img_text h1,
.img_text-b h1,
.img_text-c h1 {
    padding: 0px;
    margin: 5px 0 0 0;
    font-size: 1.8rem !important;
}

.img_text h2 {
    color: #00a0df;
}

.img_text-b h2 {
    color: #77b800;
}

.img_text-c h2 {
    color: #dd6000;
}

.img_text p,
.img_text-b p,
.img_text-c p {
    margin-top: 18px;
    margin-bottom: 0.9rem;
    font-size: 1.1rem;
    margin-right: 1rem;
}

.hex::after {
    content: '';
    display: block;
    padding-bottom: 86.602%;
    /* =  100 / tan(60) * 1.5 */
}

.hexIn {
    position: absolute;
    width: 100%;
    padding-bottom: 115.470%;
    /* =  width / sin(60) */
    overflow: hidden;
    visibility: hidden;
    outline: 1px solid transparent;
    /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
    -ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
    transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexIn * {
    position: absolute;
    visibility: visible;
    outline: 1px solid transparent;
    /* fix for jagged edges in FF on hover transition */
}

.hexLink {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
    -ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
    transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}


/*** HEX CONTENT **********************************************************************/

.hex img {
    left: -100%;
    right: -100%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    -webkit-filter: brightness(100%);
    -ms-filter: brightness(100%);
    filter: brightness(100%);
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
}


/*** HOVER EFFECT  **********************************************************************/

.hexLink:hover h1,
.hexLink:focus h1,
.hexLink:hover p,
.hexLink:focus p {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.hexIn:hover .img:before,
.hexIn:hover,
.hex img:hover,
.hexIn:hover .img:after,
.hexIn:hover .hexLink {
    /* opacity: 0.4; */
    -webkit-filter: brightness(70%);
    -ms-filter: brightness(70%);
    filter: brightness(70%);
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}


/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/

@media (min-width:900px) {
    #hexagonGrid {
        padding-bottom: 12%;
    }
    .img1 {
        grid-area: 1 / 1 / 3 / 3;
    }
    .img2 {
        grid-area: 1 / 3 / 3 / 5
    }
    .img3 {
        grid-area: 1 / 7 / 3 / 9;
    }
    .img_text {
        grid-area: 4 / 1 / 6 / 4;
    }
    .img4 {
        grid-area: 3 / 4 / 5 / 6;
    }
    .img5 {
        grid-area: 3 / 6 / 5 / 8;
    }
    .img6 {
        grid-area: 3 / 8 / 5 / 10;
    }
    .img7 {
        grid-area: 5 / 5 / 7 / 7;
    }
    .img8 {
        grid-area: 5 / 7 / 7 / 9;
    }
    /* second gallery ---------------------------*/
    .img1-b {
        grid-area: 1 / 5 / 3 / 7;
    }
    .img2-b {
        grid-area: 1 / 7 / 3 / 9;
    }
    .img3-b {
        grid-area: 3 / 4 / 6 / 6;
    }
    .img_text-b {
            grid-area: 4 / 1 / 6 / 4;
    padding-right: 15px;
    }
    .img4-b {
        grid-area: 3 / 6 / 5 / 8;
    }
    .img5-b {
        grid-area: 3 / 8 / 5 / 10;
    }
    .img6-b {
        grid-area: 5 / 3 / 7 / 5;
    }
    .img7-b {
        grid-area: 5 / 5 / 7 / 7;
    }
    .img8-b {
        grid-area: 5 / 7 / 7 / 9;
    }
    /* third gallery ---------------------- */
    .img1-c {
        grid-area: 1 / 3 / 3 / 5;
    }
    .img2-c {
        grid-area: 1 / 5 / 3 / 7;
    }
    .img3-c {
        grid-area: 1 / 7 / 3 / 9;
    }
    .img_text-c {
        grid-area: 4 / 1 / 6 / 4;
    }
    .img4-c {
        grid-area: 3 / 4 / 5 / 6;
    }
    .img5-c {
        grid-area: 3 / 6 / 5 / 8;
    }
    .img6-c {
        grid-area: 3 / 8 / 5 / 10;
    }
    .img7-c {
        grid-area: 5 / 3 / 7 / 5;
    }
    .img8-c {
        grid-area: 5 / 5 / 7 / 7;
    }
}

@media (max-width: 899px) and (min-width:450px) {
    /* <- 3-2  hexagons per row */
    #hexagonGrid {
        grid-template-columns: repeat(6, 1fr);
        padding-bottom: 19.2%;
    }
    .img1,
    .img1-b,
    .img1-c {
        grid-area: 2 / 1 / 3 / 3;
    }
    .img2,
    .img2-b,
    .img2-c {
        grid-area: 2 / 3 / 3 / 5;
    }
    .img3,
    .img3-b,
    .img3-c {
        grid-area: 2 / 5 / 3 / 7;
    }
    .img_text,
    .img_text-b,
    .img_text-c {
        padding-top: 25px;
        grid-area: 1 / 1 / 1 / 6;
    }
    .img4,
    .img4-b,
    .img4-c {
        grid-area: 3 / 2 / 5 / 4;
    }
    .img5,
    .img5-b,
    .img5-c {
        grid-area: 3 / 4 / 5 / 6;
    }
    .img6,
    .img6-b,
    .img6-c {
        grid-area: 5 / 1 / 7 / 3;
    }
    .img7,
    .img7-b,
    .img7c {
        grid-area: 5 / 3 / 7 / 5;
    }
    .img8,
    .img8-b,
    .img8-c {
        grid-area: 5 / 5 / 7 / 7;
    }
}

@media (max-width: 449px) {
    /* <- 2-1  hexagons per row */
    #hexagonGrid {
        grid-template-columns: repeat(4, 1fr);
        padding-bottom: 19.2%;
        grid-gap: 5px;
    }
    .img_text,
    .img_text-b,
    .img_text-c {
        grid-area: 1 / 1 / 1 / 5;
    }
    .img1,
    .img1-b,
    .img1-c,
    img1-b,
    img1-c {
        grid-area: 2 / 1 / 3 / 3;
    }
    .img2,
    .img2-b,
    .img2-c {
        grid-area: 2 / 3 / 3 / 5;
    }
    .img3,
    .img3-b,
    .img3-c {
        grid-area: 3 / 2 / 4 / 4;
    }
    .img4,
    .img4-b,
    .img4-c {
        grid-area: 4 / 1 / 5 / 3;
    }
    .img5,
    .img5-b,
    .img5-c {
        grid-area: 4 / 3 / 5 / 5;
    }
    .img6,
    .img6-b,
    .img6-c {
        grid-area: 5 / 2 / 6 / 4;
    }
    .img7,
    .img7-b,
    .img7-c {
        grid-area: 6 / 1 / 6 / 3;
    }
    .img8,
    .img8-b,
    .img8-c {
        grid-area: 6 / 3 / 6 / 5;
    }
}

@media (max-width: 400px) {
    #hexagonGrid {
        font-size: 13px;
    }
}