.hex-main {
    display:flex;
    --s: 200px;  /* size  */
    --m: 10px;    /* margin */
    --f: calc(var(--s) * 1.732 + 4 * var(--m) - 1px);
    width: 100%;
    justify-content: center;
  }
  
  .hex-container {
    font-size: 0; /* disable white space between inline block element */
  }
  
  .hex-container div {
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s) * 1.1547);
    display: inline-block;
    clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
    margin-bottom: calc(var(--m) - var(--s) * 0.2885);
    background-color: #1e1e1e;
    overflow: hidden;
    position: relative;
    
    font-size:initial;
    text-transform: uppercase;
    font-weight: bold;
  
    transition: all 300ms ease-in-out;
  }
  
  .hex-container div:hover {
    transform: scale(0.9);
    background-color: #00d084;
  }
  
  .hex-container div div {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: absolute;
      top: 0%;
      right: 0%;
      margin: 0;
      /* padding: 0px 20px; */
  }

  .hex-container div div a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    
    z-index: 10;
    transition: all 300ms ease-in-out;
  }
  
  .hex-container div div img {
    position: absolute;
    z-index: 0;
  }
  
  .hex-container::before {
    content: "";
    width: calc(var(--s) / 2 + var(--m));
    float: left;
    height: 120%; 
    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px), #000 0 var(--f));
  }

  /* Hexagon Icon */
  .hex-icon {
    width: 28px;
    margin: 1px;
    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%);
    margin-bottom: calc(1px - 28 * 0.2885);
    background-color: #1e1e1e;
    overflow: hidden;
    position: relative;
  }