body { margin: 0; font-family: "Helvetica Neue", sans-serif; line-height: 1.25; }

a { text-decoration: underline; }
p { margin-bottom: 10px; }

img { max-width: 100%; height: auto; }

.button { background: #c31e46; color: #fff; text-decoration: none; padding: 12px 10px; text-align: center; text-transform: uppercase; display: block; margin: 0 20px 20px; font-size: 14px; }
.button:hover, button:active { background: #8F0728; }

.highlight { color: #fbf994; }

.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px; }

.header { background: #c01e44; grid-column: 1 / -1; margin-bottom: 20px; }

	.dk-header { background: #b1cfc5 url(images/pattern.svg) left calc(100% - 10px) repeat-x; padding: 10px 0 37px; }
	.dk-logo { grid-column: span 4; }
	.dkcom-link { grid-column: span 5; align-self: center; grid-column-end: -1; color: #c31e46; text-align: right; }

	.logo { grid-column: span 7; padding: 20px 20px 20px 0; align-self: center; margin-top: -5px; }
	
	.intro { color: #fff; grid-column: span 2; padding: 20px 0; margin-right: -20px; margin-bottom: 0; align-self: center; line-height: 1.125; }
	.intro a { display: block; color: #fff; }

	.book { grid-column: span 3; align-self: center; }
	
	.language { background: #b1cfc5; grid-column: 1 / -1; margin-top: -20px; padding: 20px; text-align: right; }
	.language p, .description p { margin: 0; }

	.description p { text-align: center; }

.thumbnails {  }

	.block { list-style: none; margin: 0; grid-column: span 4; text-align: center; background: rgba(177, 207, 197, 0.3); position: relative; }
	.block a { text-decoration: none; }
	.block img { margin-bottom: 5px; }
	.block p { font-size: 18px; font-weight: bold; text-transform: capitalize; }
	.block p span { display: block; font-size: 16px; font-weight: normal; text-transform: lowercase; }

.copyright, .description, .thumbnails { grid-column: 1 / -1; }

.copyright { font-size: 14px; color: #989898; margin-top: 25px; }


@media only screen and (max-width: 768px) {

	.dk-logo { grid-column: span 7; }
	.logo { grid-column: span 7; margin-bottom: -30px; order: 0; align-self: center; margin: 0; padding-right: 0; }
	.intro { grid-column: 1 / -1; margin: 0; order: 2; margin-top: -40px; }
	.intro a { display: inline; }
	.book { grid-column: span 5; order 1; }
	.language { order: 3; }
	
	.block { grid-column: span 6; }

}

@media only screen and (max-width: 375px) {

	body { font-size: 80%; }

	.block { grid-column: 1 / -1; }
	
}