:root{--background-light-map:#f7f7f6;--background-dark-map:#262626;--color-lokaal:#ccff00;--color-kapitaal:#990000}body{font-family:sans-serif;margin:0;background:var(--background-light-map);color:#222}.home{height:100vh;display:grid;grid-template-rows:1fr 5fr;grid-template-columns:minmax(300px,1fr)4fr;& .home--title{ grid-row: 1; grid-column: 1/-1; } & .home--info{ grid-row: 2; grid-column: 1; padding: 1rem; } & .home--map{ grid-row: 2; grid-column: 2; }}.home--title{margin:0;display:grid;grid-template-columns:5fr 6fr;height:100%;& > div { display: grid; place-content: center; & > p{ margin: 0; } } font-size: 2.5rem;font-weight:700;& .lokaal{ --offset: 50px; height: 100%; width: calc(100% + calc(var(--offset))); clip-path: polygon( 0 0, 100% 0, calc(100% - var(--offset)) 100%, 0 100% ); }}.lokaal{background:var(--color-lokaal);color:#000}.kapitaal{background:var(--color-kapitaal);color:#fff}.home--info{word-break:break-word}