.honeycomb img {
    width: 100%;
    display: block;
        height: 100%;
    object-fit: cover;
}
.honeycomb {
    margin: 1rem auto;
    padding: 0 0 2.4rem;
    text-align: center;
    max-width: 50rem;
    margin-left: -30px;
}
.honeycomb .item {
    width: 15.5rem;
    height: 15.5rem;
    position: relative;
    display: inline-block;
    margin: 0.4rem;
      transition: transform 1s;
  transform-style: preserve-3d;

}
.honeycomb .item::before {
    content: "";
    position: absolute;
    top: 0 !important; bottom: 0; left: 0 !important; right: 0;
    background-color: transparent;
    clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    transform: scale(1.077);
    transition: transform 0.3s;
}
.honeycomb .item:hover::before {
    transform: scale(1.154);
}
.honeycomb .item a {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background-size: cover;
    background-position: center;
    clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
	 transition: 1s;
}

.flip-box-front, .flip-box-back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  transition: 1s;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
  transition: 1s;

}
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  display: none;
   transition: 1s;
}

.honeycomb .item:hover a { transform: rotateY(180deg); transition: 1s;}
.honeycomb .item:hover .flip-box-front {display: none;}
.honeycomb .item:hover .flip-box-back {display: block;}
@supports (display: grid) {

    @media (min-width: 17rem) {
        .honeycomb {
            display: grid;
            max-width: 15rem;
            grid-template-columns: repeat(3, 5rem);
        }
        .honeycomb .item {
            grid-column: span 2;
            margin: 0; 
            margin-bottom: -2.4rem !important;  
        }
        .honeycomb .item:nth-child(even) {grid-column: 2}
    }
    
    @media (min-width: 22rem) {
        .honeycomb {
            max-width: 21rem;
            grid-template-columns: repeat(4, 5rem);
                padding-left: 0px !important;
        }
        .honeycomb .item:nth-child(3n+1) {grid-column: 1}
    .honeycomb .item:nth-child(3n+2) {grid-column: 3}
    .honeycomb .item:nth-child(3n+0) {grid-column: 2}
    }
    
    @media (min-width: 32rem) {
        .honeycomb{
            max-width: 30rem;
            grid-template-columns: repeat(6, 5rem);
        }
        .honeycomb .item:nth-child(5n+1) {grid-column: 1}
        .honeycomb .item:nth-child(5n+2) {grid-column: 3}
        .honeycomb .item:nth-child(5n+3) {grid-column: 5}
        .honeycomb .item:nth-child(5n+4) {grid-column: 2}
        .honeycomb .item:nth-child(5n+0) {grid-column: 4}
    }
    
    @media (min-width: 42rem) {
        .honeycomb {
            max-width: 40rem;
            grid-template-columns: repeat(8, 5rem);
            padding-left: 0px !important;
        }
        .honeycomb .item:nth-child(7n+1) {grid-column: 1}
        .honeycomb .item:nth-child(7n+2) {grid-column: 3}
        .honeycomb .item:nth-child(7n+3) {grid-column: 5}
        .honeycomb .item:nth-child(7n+4) {grid-column: 7}
        .honeycomb .item:nth-child(7n+5) {grid-column: 2}
        .honeycomb .item:nth-child(7n+6) {grid-column: 4}
        .honeycomb .item:nth-child(7n+0) {grid-column: 6}
    }
    
    @media (min-width: 54rem) {
        .honeycomb {
            max-width:100%;
            grid-template-columns: repeat(11, 7rem);
        }
        .honeycomb .item {
            grid-column: span 2;
            margin: 0; 
            margin-bottom: -3.3rem !important;  
        }
        .honeycomb .item:nth-child(10n+1) {grid-column: 1}
        .honeycomb .item:nth-child(10n+2) {grid-column: 3}
        .honeycomb .item:nth-child(10n+3) {grid-column: 5}
        .honeycomb .item:nth-child(10n+4) {grid-column: 7}
        .honeycomb .item:nth-child(10n+5) {grid-column: 9}
        .honeycomb .item:nth-child(10n+6) {grid-column: 2}
        .honeycomb .item:nth-child(10n+7) {grid-column: 4}
        .honeycomb .item:nth-child(10n+8) {grid-column: 6}
        .honeycomb .item:nth-child(10n+9) {grid-column: 8}
        .honeycomb .item:nth-child(10n+0) {grid-column: 10}
    }
}