:root {
    --color-blue: #0062ff;
    --color-white: #e1e1e1;
    --color-gray: #AAAAAA;
    
    --padding-left: calc(env(safe-area-inset-left) + .75rem);
    --padding-right: calc(env(safe-area-inset-right) + .75rem);
    
    --column-mobile: calc(calc(100vw - var(--padding-left) - var(--padding-right) - 5rem) / 6);
    --column-desktop: calc(calc(100vw - var(--padding-left) - var(--padding-right) - 11rem) / 12);
}


/* 
DISPLAY
*/
.hide {
    display: none;
}

/* 
ELEMENTS
*/
a.button,
span.button {
    width: fit-content;
    padding: .56em 1em .44em;
    background-color: var(--color-white);
    border: 1px solid var(--color-blue);
    border-radius: 5rem;
    transition: 200ms ease-in-out;
}
a.button.active {
    background-color: var(--color-blue);
    border: 1px solid var(--color-white);
    color: var(--color-white) !important;
}

figure.placeholder {
    margin-bottom: 1rem;
    width: 100vw;
    height: 130vw;
}

img.expand {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main.page {
    padding: 2rem 0 10rem;
}


/* TABLET */
@media only screen and (min-width: 720px) {
figure.placeholder {
    height: 50vw;
}

main.page {
    padding: 3rem 0 15rem;
}
}



/* DESKTOP */
@media only screen and (min-width: 1024px) {
    figure.placeholder {
        height: 35vw;
    }
}

@media (hover: hover) {
    a.button:hover {
        background-color: var(--color-blue);
        color: var(--color-white) !important;
    }
}