html { font-family: Arial, Helvetica, sans-serif; font-size: medium; }
html, body { height: 100%; margin: 0; padding: 0; color: #000; background-color: #EEE; }

* { box-sizing: border-box; outline: none; }
a { color: inherit; text-decoration: underline; border: none; }
p { margin-top: 0; }
p:last-child { margin-bottom: 0; }
img { border: 0; vertical-align: bottom; }

.seite { max-width: 60rem; margin: 0 auto; padding: 1rem; background-color: #FFF; line-height: 1.5rem; }
header { margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: thin solid #666; }
footer { margin-top: 1rem; padding-top: .5rem; border-top: thin solid #666; }

.grid-container { display: grid; }

.ref { margin: 3rem auto; width: 80%; grid-template-columns: 210px 1fr; row-gap: 3rem; column-gap: 4rem; }
.screenshot img { border: thin solid #333; }
.kunde { margin: 0; font-weight: bold; align-self: center; color: #343589; }

.fuss { grid-template-columns: auto auto auto; column-gap: 3rem; place-content: space-evenly; }


@media screen and (max-width: 45rem) {
	.ref { width: 100%; grid-template-columns: auto; row-gap: 1rem; text-align: center; }
	.kunde { margin-bottom: 3rem; }
	.fuss { grid-template-columns: auto; row-gap: 1rem; text-align: center; }
}