:root {
    --page-padding: clamp(4rem, 10vw, 8rem);
    --logo-size: clamp(300px, 42vw, 540px);
    --logo-gap: clamp(5rem, 12vh, 9rem);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #ffffff;
}

body {
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
}

.logo-gallery {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--logo-gap);
    padding: var(--page-padding) 1.5rem;
}

.logo-frame {
    width: var(--logo-size);
    height: var(--logo-size);
    margin: 0;
    display: grid;
    place-items: center;
    perspective: 900px;
    cursor: grab;
    touch-action: none;
}

.logo-frame:active {
    cursor: grabbing;
}

.logo-frame:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 1rem;
}

.logo-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: transparent;
    filter: brightness(0) saturate(100%);
    transform: rotateY(var(--rotate-y, 0deg));
    transform-style: preserve-3d;
    backface-visibility: visible;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    transition: transform 160ms ease-out;
}

.logo-frame.is-dragging img {
    transition: none;
}

@media (max-width: 640px) {
    :root {
        --page-padding: 4rem;
        --logo-size: min(78vw, 340px);
        --logo-gap: 5rem;
    }
}