:root {
    --content-max-width: 1300px;

    --color-primary: #E82356;
    --color-white: #ffffff;
    --color-gray-100: #eeeeee;
    --color-gray-200: #909090;
    --color-black: #1c1c1c;

    --font-sans: "Inter", system-ui, Arial, sans-serif;
    --font-size-12: calc(var(--base-value) * 0.75);
    --font-size-16: var(--base-value);
    --font-size-24: clamp(18px, 3vw, calc(var(--base-value) * 1.5));
    --font-size-32: calc(var(--base-value) * 2);
    --font-size-48: calc(var(--base-value) * 3);

    --letter-spacing-tighter: -0.1em;
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-loose: 0.05em;
    --letter-spacing-looser: 0.15em;

    --top-spacing: 200px;
}
* {
    transition: all 0.3s;
}
html {
    font-size: var(--base-value);
}
body {
    background-color: var(--color-black);
    color: var(--color-gray-100);
}
h1 {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: var(--font-size-24);
    line-height: 133%;
}
p {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: var(--font-size-16);
}
a {
    color: inherit;
    text-decoration: none;
}
.portfolio {
    --grid-gap: var(--spacing-400);
}
.portfolio img {
    aspect-ratio: 4/3;
    object-fit: cover;
}
.portfolio a:hover img:not(.disabled) {
    filter: brightness(0.66);
}
.spacer {
    display: none;
}
@media ( min-width: 48rem ) {
    :root {
        --top-spacing: 300px;
    }
    .spacer {
        display: block;
    }
    .portfolio img {
        aspect-ratio: unset;
    }
}