.hexagon-photo {
    font-size: 1em;
    position: relative;
    float: left;
    height: 37em;
    width: 39em;
    flex-shrink: 0;
    margin: 1rem;
    background-image: radial-gradient(circle, #ffeac1 0%, #ffb604 70%, transparent 70%, transparent 100%), radial-gradient(circle, #BFE2FF 0%, #BFE2FF 70%, transparent 70%, transparent 100%), radial-gradient(circle, #BFE2FF 0%, #BFE2FF 70%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 20em 20em, 15em 15em, 12em 12em;
    background-position: 5em 5em, 20em 10em, 11em 25em;
}

@media screen and (max-width: 767px) {
    .hexagon-photo {
        height: 46em;
        width: 30em;
        background-size: 20em 20em, 17em 17em, 10em 10em;
        background-position: 2em 3em, 10em 16em, 3em 32em;
    }
}
@media screen and (max-width: 580px) {
    .hexagon-photo {
        height: 61em;
        width: 20em;
        background-size: 18em 18em, 17em 17em, 10em 10em;
        background-position: 1.5em 7em, 0em 25em, 7em 44em;
    }
}

.hexagon.hex-big {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 15em;
    width: 15em;
}
.hexagon.hex-mid {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12em;
    width: 12em;
}
.hexagon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 10em;
    width: 10em;
    filter: drop-shadow(0 7px 15px rgba(0, 0, 0, 0.5));
}
.hexagon.hex-small {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6em;
    width: 6em;
}
.hexagon:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    background-size: cover;
}
.hexagon:nth-of-type(1):before {
    background-color: #f8efee;
    animation: bg-color-1 10s infinite;
} @keyframes bg-color-1 {
    0% { background-color: #bdcaec; }
    20% { background-color: #81bfe1; }
    40% { background-color: #59d3bb; }
    60% { background-color: #7bb66e; }
    80% { background-color: #c7c5bc; }
    100% { background-color: #eeecec; }
}

.hexagon:nth-of-type(2):before {
    background-color: #f8efee;
    animation: bg-color-2 10s infinite;
} @keyframes bg-color-2 {
    0% { background-color: #c9a699; }
    20% { background-color: #b05565; }
    40% { background-color: #b07255; }
    60% { background-color: #b05592; }
    80% { background-color: #cc6eef; }
    100% { background-color: #debdbd; }
}

.hexagon:nth-of-type(3):before {
    background-color: #f8efee;
    animation: bg-color-3 10s infinite;
} @keyframes bg-color-3 {
      0% { background-color: #efe6b8; }
      20% { background-color: #ffe43f; }
      40% { background-color: #ffc300; }
      60% { background-color: #e1da4b; }
      80% { background-color: #75f16a; }
      100% { background-color: #aae1a8; }
  }

.hexagon:nth-of-type(4):before {
    background-color: #a0d0ef;
    animation: bg-color-4 10s infinite;
} @keyframes bg-color-4 {
      0% { background-color: #4f91ea; }
      20% { background-color: #2536f1; }
      40% { background-color: #4761c5; }
      60% { background-color: #7f59c2; }
      80% { background-color: #a848e0; }
      100% { background-color: #d195e8; }
  }

.hexagon:nth-of-type(5):before {
    background-color: #d9a39e;
    animation: bg-color-5 10s infinite;
} @keyframes bg-color-5 {
      0% { background-color: #e74c3c; }
      20% { background-color: #f1c40f; }
      40% { background-color: #1abc9c; }
      60% { background-color: #3498db; }
      80% { background-color: #49e8d2; }
      100% { background-color: #dc9683; }
  }

.hexagon:nth-of-type(6):before {
    background-color: #e74c3c;
    animation: bg-color-6 10s infinite;
} @keyframes bg-color-6 {
      0% { background-color: #efa5a5; }
      20% { background-color: #97b3ef; }
      40% { background-color: #6785f6; }
      60% { background-color: #80dce0; }
      80% { background-color: #9bfd61; }
      100% { background-color: #d0eac7; }
  }

.hexagon:nth-of-type(7):before {
    background-color: #e74c3c;
    animation: bg-color-7 10s infinite;
} @keyframes bg-color-7 {
      0% { background-color: #e74c3c; }
      20% { background-color: #f1c40f; }
      40% { background-color: #1abc9c; }
      60% { background-color: #3498db; }
      80% { background-color: #9b59b6; }
      100% { background-color: #e74c3c; }
  }

.hexagon:nth-of-type(8):before {
    background-color: #bbfda8;
    animation: bg-color-8 10s infinite;
} @keyframes bg-color-8 {
      0% { background-color: #80f552; }
      20% { background-color: #d7fd4c; }
      40% { background-color: #47eccb; }
      60% { background-color: #adead0; }
      80% { background-color: #ec99bd; }
      100% { background-color: #deb4a7; }
  }

.hexagon:nth-of-type(9):before {
    background-color: #5a92fd;
    animation: bg-color-9 10s infinite;
} @keyframes bg-color-9 {
    0% { background-color: #b173f5; }
    20% { background-color: #df49f6; }
    40% { background-color: #ff7bc6; }
    60% { background-color: #efed77; }
    80% { background-color: #99f18e; }
    100% { background-color: #d8c0fd; }
}

.hexagon:nth-of-type(1) {
    top: 3em;
    left: 5em;
}
.hexagon:nth-of-type(2) {
    top: 12em;
    left: 21em;
}
.hexagon:nth-of-type(3) {
    top: 0;
    left: 23em;
}
.hexagon:nth-of-type(4) {
    top: 22em;
    left: 10em;
}
.hexagon:nth-of-type(5) {
    top: 27em;
    left: 20em;
}
.hexagon:nth-of-type(6) {
    top: 30em;
    left: 5em;
}
.hexagon:nth-of-type(7) {
    top: 10em;
    left: 32em;
}
.hexagon:nth-of-type(8) {
    top: 1em;
    left: 1em;
}
.hexagon:nth-of-type(9) {
    top: 23em;
    left: 31em;
}
@media screen and (max-width: 767px) {
    .hexagon:nth-of-type(1) {
        top: 3em;
        left: 5em;
    }
    .hexagon:nth-of-type(2) {
        top: 17em;
        left: 14em;
    }
    .hexagon:nth-of-type(3) {
        top: 0;
        left: 19em;
    }
    .hexagon:nth-of-type(4) {
        top: 27em;
        left: 6em;
    }
    .hexagon:nth-of-type(5) {
        top: 33em;
        left: 16em;
    }
    .hexagon:nth-of-type(6) {
        top: 14em;
        left: 1em;
    }
    .hexagon:nth-of-type(7) {
        top: 40em;
        left: 11em;
    }
    .hexagon:nth-of-type(8) {
        top: 1em;
        left: 1em;
    }
    .hexagon:nth-of-type(9) {
        top: 11em;
        left: 20em;
    }
}
@media screen and (max-width: 580px) {
    .hexagon:nth-of-type(1) {
        top: 4em;
        left: 4em;
    }
    .hexagon:nth-of-type(2) {
        top: 20em;
        left: 1em;
    }
    .hexagon:nth-of-type(3) {
        top: 35em;
        left: 7em;
    }
    .hexagon:nth-of-type(4) {
        top: 43em;
        left: 0em;
    }
    .hexagon:nth-of-type(5) {
        top: 48em;
        left: 9em;
    }
    .hexagon:nth-of-type(6) {
        top: 20em;
        left: 14em;
        height: 4em;
        width: 4em;
    }
    .hexagon:nth-of-type(7) {
        top: 54em;
        left: 3em;
    }
    .hexagon:nth-of-type(8) {
        top: 1em;
        left: 1em;
    }
    .hexagon:nth-of-type(9) {
        top: 36em;
        left: 4em;
        height: 3em;
        width: 3em;
    }
}