:root {
    --color-white: #f3f3f3;
    --color-red: #ff0022;

    --column-widthT: calc(calc(100vw - 9rem) / 8);
    --column-widthD: calc(calc(100vw - 17rem) / 16);
}


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

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

/* links */
a.link {
    display: block;
}

a.link.active {
    color: var(--color-white);
}

a.button {
    display: block;
    padding: 1rem 2rem;
    background-color: var(--color-red);
    border: 3px solid black;
    border-radius: 2px;
}

/* page */
main.page {
    min-height: 100vh;
    padding: 1rem 1rem 20rem;
}


/* TABLET */
@media only screen and (min-width: 768px) {

}


/* DESKTOP */
@media only screen and (min-width: 1024px) {

}


/* DESKTOP LARGE */
@media only screen and (min-width: 1760px) {

}


/* HOVER */
@media (hover: hover) {
    a.link:hover {
        color: var(--color-white);
    }

    a.button:hover {
        background-color: black;
        color: var(--color-red);
    }
}