.hex {
    display: block;
    margin: 0 auto;
    position: relative;
    width: 320px;
    height: 277.12px; /* width * 0.866 */
    background: red;
    box-sizing: border-box;
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  }

.hex-background {
    position: absolute;
    background-color: orange; /*color of the main-background*/
    top: 2px; /* equal to border thickness */
    left: 2px; /* equal to border thickness */
    width: 316px; /* container height - (border thickness * 2) */
    height: 273.12px; /* container height - (border thickness * 2) */
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex img {
    position: absolute;
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
    -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
} 


.hex-main {
    display:flex;
    --s: 100px;  /* size  */
    --m: 4px;    /* margin */
    --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
}
  
.hex-container {
    font-size: 0; /*disable white space between inline block element */
}
  
.hex-container img {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s)*1.1547); 
    display: inline-block;
    font-size:initial;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    background: red;
    margin-bottom: calc(var(--m) - var(--s)*0.2885); 
}