body {
    padding: 3rem;
    --background-color: #f1f1f1;
     background-color: color-mix(in oklab, var(--base-color), var(--background-color) 75%); 
}

h1 {
    color: var(--base-color);
}

.tinted-image {
    display: grid;
    width: 500px;
    height: 500px;
    & > * {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
    }
    .tinty-mctintface {
        background: color-mix(in oklab, var(--base-color), #00000010 40%);
    }
}