body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-component-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;

    gap: var(--margin);
}

.gallery-component {
    height: auto;
    width: auto;

    transition: none;
    transform-style: preserve-3d;
    perspective: 1000px;

    pointer-events: auto;
    transform: translateZ(0);
    will-change: transform;

    flex-grow: 1;
}

.gallery-component > .flip {
    min-height: calc(var(--font-size) * 10);
    min-width: calc(var(--font-size) * 18);

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flipped {
    transform: rotateY(180deg);
    transition: transform 0.8s;
}

.flip-front, .flip-back {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-back {
    transform: rotateY(180deg);
    padding: var(--padding);
}

pre[class*="language-"] * {
    font-family: 'Fira Code', Consolas, Monaco, monospace;
    font-size: calc(var(--font-size) * .8);
}

#comp-Panel .flip-front > .panel {
    height: 100px;
    width: 200px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

#comp-Fieldset .flip-front > fieldset {
    height: 100px;
    width: 200px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}