.example
    .hexagon.-big
        span.text A
    .hexagon.-big
        span.text B
    .hexagon.-normal
        span.text C
    .hexagon.-normal
        span.text D
    .hexagon.-normal
        span.text E
    .hexagon.-small
    .hexagon.-small
    .hexagon.-small
    .hexagon.-small

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

    // Max font size = 20px
    // Min font-size = 14px
    // Breakpoints: 400px and 1200px
    // font-size = (14px + (20 - 14) * ((100vw - 400px) / ( 1200 - 400)))
    font-size: ~'calc(14px + 3 * ((100vw - 400px) / 400))';

    @media screen and (max-width: 400px) {
        font-size: 14px;
    }

    @media screen and (min-width: 1200px) {
        font-size: 20px;
    }

    line-height: 1.25;
}


body {
    background: #FCB48D;
}


.example {
    position: relative;
    width: 40rem;
    max-width: 1100px;
    height: 40rem;
    margin: 2rem auto;
    background: radial-gradient(circle, #782B7F 0%, #782B7F 70%, transparent 70%, transparent 100%),
        radial-gradient(circle, #DA627D 0%, #DA627D 70%, transparent 70%, transparent 100%),
        radial-gradient(circle, #9A348E 0%, #9A348E 70%, transparent 70%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 20rem 20rem, 15rem 15rem, 10rem 10rem;
    background-position: 5rem 5rem, 20rem 10rem, 14rem 24rem;
    
    
    @media screen and (max-width: 45rem) {
        height: 50rem;
        width: 30rem;
        
        background-size: 20rem 20rem, 17rem 17rem, 10rem 10rem;
        background-position: 2rem 3rem, 10rem 16rem, 10rem 32rem;
    }
    
    
    @media screen and (max-width: 30rem) {
        width: 20rem;
        height: 62rem;
        
        background-size: 18rem 18rem, 17rem 17rem, 10rem 10rem;
        background-position: 1.5rem 7rem, 0rem 25rem, 7rem 42rem;
    }
}


.hexagon {
    position: absolute;
    height: 10rem;
    width: 10rem;
    filter: drop-shadow(-2px 7px 10px rgba(100, 100, 100, 0.5));
    
    
    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(-120deg, #FFECE2 0%, #FFFFFF 100%);
        
        // Sorry, IE, not this time
        clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    }
    
    
    &.-big {
        height: 15rem;
        width: 15rem;
        
        > .text {
            font-size: 7rem;
        }
    }
    
    
    &.-normal {
        > .text {
            font-size: 3rem;
        }
    }
    
    
    &.-small {
        height: 6rem;
        width: 6rem;
    }
    
    
    &:nth-of-type(1) { top: 3rem;  left: 5rem;  }
    &:nth-of-type(2) { top: 11rem; left: 18rem; }
    
    &:nth-of-type(3) { top: 0;     left: 19rem; }
    &:nth-of-type(4) { top: 22rem; left: 10rem; }
    &:nth-of-type(5) { top: 27rem; left: 20rem; }
    
    &:nth-of-type(6) { top: 30rem; left: 5rem;  }
    &:nth-of-type(7) { top: 10rem; left: 32rem; }
    &:nth-of-type(8) { top: 1rem;  left: 1rem;  }
    &:nth-of-type(9) { top: 23rem; left: 31rem; }
    
    
    > .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 60%;
        text-align: center;
        font-weight: bold;
        color: #DA627D;
        z-index: 2;
    }
    
    
    @media screen and (max-width: 45rem) {
        &:nth-of-type(1) { top: 3rem;  left: 5rem;  }
        &:nth-of-type(2) { top: 17rem; left: 14rem; }

        &:nth-of-type(3) { top: 0;     left: 19rem; }
        &:nth-of-type(4) { top: 27rem; left: 6rem;  }
        &:nth-of-type(5) { top: 33rem; left: 16rem; }

        &:nth-of-type(6) { top: 14rem; left: 1rem;  }
        &:nth-of-type(7) { top: 40rem; left: 11rem; }
        &:nth-of-type(8) { top: 1rem;  left: 1rem;  }
        &:nth-of-type(9) { top: 11rem; left: 20rem; }
    }
    
    
    @media screen and (max-width: 30rem) {
        &:nth-of-type(1) { top: 4rem;  left: 4rem;  }
        &:nth-of-type(2) { top: 20rem; left: 1rem; }

        &:nth-of-type(3) { top: 35rem; left: 7rem; }
        &:nth-of-type(4) { top: 43rem; left: 0rem;  }
        &:nth-of-type(5) { top: 48rem; left: 9rem; }

        &:nth-of-type(6) { top: 20rem; left: 14rem;  height: 4rem; width: 4rem; }
        &:nth-of-type(7) { top: 54rem; left: 3rem;  }
        &:nth-of-type(8) { top: 1rem;  left: 1rem;  }
        &:nth-of-type(9) { top: 36rem; left: 4rem; height: 3rem; width: 3rem; }
    }
}