/* MoMA Serif */
@font-face {
    font-family: "MoMA Serif";
    src: url("../fonts/MoMASans-Regular-Web.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "MoMA Serif";
    src: url("../fonts/MoMASans-RegularItalic-Web.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: "MoMA Serif";
    src: url("../fonts/MoMASans-Medium-Web.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: "MoMA Serif";
    src: url("../fonts/MoMASans-MediumItalic-Web.woff2") format("woff2");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "MoMA Serif";
    src: url("../fonts/MoMASans-Bold-Web.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "MoMA Serif";
    src: url("../fonts/MoMASans-BoldItalic-Web.woff2") format("woff2");
    font-weight: 800;
    font-style: italic;
}

main {
    min-height: calc(100% - 3rem);
}

@media (min-width: 701px) {
    body {
        padding-inline: calc(var(--space-page-x) * 0.85);
    }

    main {
        width: min(100%, calc(15% + var(--measure-page) * 0.85));
    }
}

h1 {
    margin-bottom: 2rem;
}

.gallery-grid {
    height: 100%;
    columns: 5 17.25rem;
    column-gap: 1.5rem;
    img {
        width: 100%;
    }
}

.gallery-item {
    display: inline-block;
    margin-bottom: 1.5rem;
    border: 1px solid black;
    background-color: white;

    transition: transform 0.25s ease;

    > p {
        margin-top: 0;
        text-align: center;
        padding: 0.1em;
    }
}

.gallery-item:hover {
    -webkit-transform: scale(1.7); /* or some other value */
    transform: scale(1.7);
}

.museum-label {
    font-family: "MoMA Serif";
    line-height: 1;
    p {
        padding: 0px;
        margin: 0.6rem 0.4rem;
        font-size: 0.8em;
    }
    .sub {
        font-size: 0.6em;
    }
    .author {
        margin-top: 0;
        font-size: 1em;
        /*font-weight: bold;*/
        > small {
            font-size: 0.6em;
        }
    }
    .title {
        font-size: 1em;
        font-weight: bold;
        font-style: italic;
    }
}