.hover_over
{
    /* Adjust spacing so the boxes dont touch the blue writing on the top of the area */
    padding-top: calc(3 * var(--sz_button_margin));

}
.hover_over > *
{
    position: relative;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
}
    .hover_over > div > p
    {
        visibility: hidden;
        display: none;
        position: absolute;
        inset: 0;

        align-items: center;
        justify-content: center;

        margin: 0;
        padding: var(--sz_button_margin);
        box-sizing: border-box;

        background-color: var(--color_primary);
        color: white;
        border-radius: var(--sz_button_margin);

        transform: rotateY(180deg);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        pointer-events: none;
    }

    .hover_over > div:hover
    {
        transform: rotateY(180deg);
        -webkit-backface-visibility: hidden;
    }

        .hover_over > div:hover p
        {
            display: flex;
            visibility: visible;
        }