:root {
    /* Color palette */
    --color-text: #303030;
    --color-inverse: #F5F5EF;
    --color-brand: #EB4B47;

    /* Font default */
    --font-stack: "Soehne", -apple-ui, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif
}

body {
    color: var(--color-text);
    background-color: var(--color-inverse);
    font-family: var(--font-stack);
}

.brand {
    color: var(--color-brand);
}

.brand-bg {
    background-color: var(--color-brand);
}

.inverse {
    color: var(--color-inverse);
}

.grid {
    display: grid;
}

.grid.col {
    grid-auto-flow: column;
}

.m-auto {
    margin: auto;
}

.logo {
    width: 140px;
}

.arrow-on-hover:hover::before {
  content: '→ ';
}

.hover-to-text {
    transition: .2s all ease-in;
    background-size: 200% 100%;
    background-position: 100% 0;
    background-image: linear-gradient(to left, var(--color-inverse) 50%, var(--color-brand) 50%);
}

.hover-to-text:hover {
    transition: .2s all ease-out;
    color: var(--color-inverse);
    background-position: 0 0;
    /* background-color: var(--color-brand); */
}

.current-color {
    color: currentColor;
}

svg {
    fill: currentColor;
}