#event_stickers {
    overflow: scroll;
    padding: 8px;
}
.hexagon {
    position: relative;
    width: 120px;
    height: 100px;
    background: #d8d8d8;
}

.hexagon:after,
.hexagon:before {
    position: absolute;
    content: "";
    z-index: 1;
    top: 0;  
    width: 0px;
    background: #fff;
    border-top: 50px transparent solid; 
    border-bottom: 50px transparent solid;
}

.hexagon:before {
    left: 0;
    border-right: 30px #d8d8d8 solid; 
}
.hexagon:after {
    right: 0;
    border-left: 30px #d8d8d8 solid; 
}

:root {
    --width: 128px;
    --a: calc(var(--width)/(2*1.73205080757));
    --l: calc(var(--width)/(1.73205080757));
    --grid: calc(2*var(--a) + var(--l));
    --grid-width: calc(var(--width));
    --grid-height: calc(var(--a) + var(--l) - 1px)
}

.hex-grid {
    display: grid;
    grid-template-columns: var(--grid-width) var(--grid-width) var(--grid-width) var(--grid-width);
    grid-template-rows: var(--grid-height) var(--grid-height) var(--grid-height) var(--grid-height);
}
.hex-grid .offset {
    transform: translateX(calc(var(--width)/2));
}
.btn {
    display: block;
    text-align: center;
    text-decoration: none;
    user-select: none;
    /* padding: 0.375rem 2rem; */
    /* border: 1px black solid; */
    
    width: var(--width);
    
    height: calc(2*var(--a) + var(--l));
    clip-path: polygon(
    0% var(--a), 
    0% calc(var(--a) + var(--l)), 
    50% 100% , 
    100% calc(var(--a) + var(--l)),
    100% var(--a),
    50% 0
    );
    background-color: #fefd64;
    text-transform: uppercase;
    transition-property: clip-path, height, width, transform;
    transition-duration: 0.2s;
}
.btn:hover, .btn:focus { 
    height: calc(1.1*(2*var(--a) + var(--l)));
    width: calc(1.1*var(--width));
    z-index: 10;
    clip-path: polygon(
    0% calc(1.1*var(--a)), 
    0% calc(1.1*(var(--a) + var(--l))), 
    50% 100%, 
    100% calc(1.1*(var(--a) + var(--l))),
    100% calc(1.1*(var(--a))),
    50% 0
    );
    transform: translateX(calc(-0.05*var(--width))) translateY(calc(-0.05*(2*var(--a) + var(--l))));
}
.btn.offset:hover, .btn.offset:focus { 
    height: calc(1.1*(2*var(--a) + var(--l)));
    width: calc(1.1*var(--width));
    z-index: 10;
    clip-path: polygon(
    0% calc(1.1*var(--a)), 
    0% calc(1.1*(var(--a) + var(--l))), 
    50% 100%, 
    100% calc(1.1*(var(--a) + var(--l))),
    100% calc(1.1*(var(--a))),
    50% 0
    );
    transform: translateX(calc(-0.05*var(--width) + var(--width)/2)) translateY(calc(-0.05*(2*var(--a) + var(--l))));
}

.btn:hover, .btn.offset:hover {
    z-index: 15;
}

/* Responsiveness for small screens */
@media screen and (max-width: 1280px) {
    :root {
        --width: calc(50vw/5);
    }
}

@media screen and (max-width: 800px) {
    :root {
        --width: calc(100vw/5);
    }
}