.icon-btns {
    display: grid;
    grid-gap: 5em;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    margin: auto;
    padding: 3em 0;
    overflow: visible;
    justify-items: center;
}

.icon-btn {
    background-color: transparent;
    outline: none;
    position: relative;
    width: 4.5em;
    height: 4.5em;
    perspective: 24em;
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    /* Adjust base size */
}

.icon-btn__back,
.icon-btn__front,
.icon-btn__label {
    transition:
        opacity 0.3s cubic-bezier(0.83, 0, 0.17, 1),
        transform 0.3s cubic-bezier(0.83, 0, 0.17, 1);
}

.icon-btn__back,
.icon-btn__front {
    border-radius: 1.25em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.icon-btn__back {
    box-shadow: 0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15);
    display: block;
    transform: rotate(15deg);
    transform-origin: 100% 100%;
    will-change: transform;
}

.icon-btn__front {
    background-color: hsla(0, 0%, 100%, 0.15);
    box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;
    backdrop-filter: blur(0.75em);
    -webkit-backdrop-filter: blur(0.75em);
    -moz-backdrop-filter: blur(0.75em);
    display: flex;
    transform-origin: 80% 50%;
    will-change: transform;
}

.icon-btn__icon {
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    /* Icon size */
    color: white;
}

.icon-btn__label {
    font-size: 0.9em;
    white-space: nowrap;
    text-align: center;
    line-height: 2;
    opacity: 0;
    position: absolute;
    top: 110%;
    right: 0;
    left: 0;
    transform: translateY(0);
    color: var(--text-primary);
    font-weight: 600;
}

.icon-btn:focus-visible .icon-btn__back,
.icon-btn:hover .icon-btn__back {
    transform: rotate(25deg) translate3d(-0.5em, -0.5em, 0.5em);
}

.icon-btn:focus-visible .icon-btn__front,
.icon-btn:hover .icon-btn__front {
    transform: translate3d(0, 0, 2em);
}

.icon-btn:focus-visible .icon-btn__label,
.icon-btn:hover .icon-btn__label {
    opacity: 1;
    transform: translateY(20%);
}