img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    .hexagon-gallery {
        margin: auto;
        margin-top: 50px;
        max-width: 1000px;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: 200px;
        grid-gap: 14px;

        padding-bottom: 50px;
    }

    .hex {
        display: flex;
        position: relative;
        width: 240px;
        height: 265px;
        background-color: #424242;
        -webkit-clip-path: polygon(0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .hex:first-child {
        grid-row-start: 1;
        grid-column: 2 / span 2;
    }

    .hex:nth-child(2) {
        grid-row-start: 1;
        grid-column: 4 / span 4;
    }

    .hex:nth-child(3) {
        grid-row-start: 1;
        grid-column: 6 / span 2;
    }

    .hex:nth-child(4) {
        grid-row-start: 2;
        grid-column: 1 / span 2;
    }

    .hex:nth-child(5) {
        grid-row-start: 2;
        grid-column: 3 / span 2;
    }

    .hex:nth-child(6) {
        grid-row-start: 2;
        grid-column: 5 / span 2;
    }

    .hex:nth-child(7) {
        grid-row-start: 2;
        grid-column: 7 / span 2;
    }

    .hex:nth-child(8) {
        grid-row-start: 3;
        grid-column: 2 / span 2;
    }

    .hex:nth-child(9) {
        grid-row-start: 3;
        grid-column: 4 / span 2;
    }

    .hex:nth-child(10) {
        grid-row-start: 3;
        grid-column: 6 / span 2;
    }


    /* Responsiveness */

    @media (min-width:320px) and (max-width:480px) {
        .hexagon-gallery {
            grid-auto-rows: 55px;
        }

        .hex {
            width: 70px;
            height: 80px;
        }
    }

    @media (min-width:480px) and (max-width:600px) {
        .hexagon-gallery {
            grid-auto-rows: 85px;
        }

        .hex {
            width: 110px;
            height: 120px;
        }
    }

    @media (min-width:600px) and (max-width:700px) {
        .hexagon-gallery {
            grid-auto-rows: 115px;
        }

        .hex {
            width: 140px;
            height: 155px;
        }
    }

    @media (min-width:701px) and (max-width:800px) {
        .hexagon-gallery {
            grid-auto-rows: 125px;
        }

        .hex {
            width: 160px;
            height: 170px;
        }
    }

    @media (min-width:801px) and (max-width:900px) {
        .hexagon-gallery {
            grid-auto-rows: 145px;
        }

        .hex {
            width: 180px;
            height: 195px;
        }
    }

    @media (min-width:901px) and (max-width:1025px) {
        .hexagon-gallery {
            grid-auto-rows: 160px;
        }

        .hex {
            width: 200px;
            height: 215px;
        }
    }

    /* End of Responsiveness */
</style>