*, *::before, *::after {box-sizing: border-box;}

html, body {width: 100%;}						

body {background-color: #FFFDF8;
			color: #333;
			font-family: Georgia, "Times New Roman", serif;
			line-height: 1.2;
			margin: 0;}
			
header {background-color: #12324E;
				color: #fff;
				text-align: center;
				padding: 30px 16px;
				border-bottom: 4px solid #08253D;}
				
header h1 {margin: 0;
					font-size: 64px;
					letter-spacing: 1px;
					font-weight: 700;
					color: #FFFDF8;}				

nav {background-color: #08253D;
		text-align: center;
		border-bottom: 1px solid rgba(0,0,0,0.25);}

nav a {display: inline-block;
			padding: 14px 22px;
			text-decoration: none;
			color: #E8EEF3;
			font-weight: 600;
			font-size: 18px;}
			
nav a:hover,
nav a:focus {color: #E87722;}			

main {max-width: 960px;
			margin: 36px auto 48px;
			padding: 0 16px;
			background: transparent;}			
			
h2 {color: #12324E;
		font-size: 40px;
		line-height: 1.25;
		margin: 0 0 16px;}

p {margin: 0 0 16px;}

strong {font-weight: 700;}

em {font-style: italic;}		

figure {margin: 24px 0;
				text-align: center;}
				
figure img {max-width: 100%;
						height: auto;
						display: block;
						margin: 0 auto;
						border-radius: 6px;}

figcaption {margin-top: 10px;
						color: #4a4a4a;
						font-style: italic;}
						
main section:first-of-type
figure:first-of-type {position: relative;
											max-width: 960px;
											margin: 24px auto;}	

main section:first-of-type	
figure:first-of-type figcaption {position: absolute;
																top: 50%;
																left: 50%;
																transform: translate(-50%, -50%);
																padding: 10px 20px;
																color:#fff;
																font-weight: 700;
																font-size: clamp(18px, 2.3vw, 28px);
																text-align: center;
																border-radius: 10px;
																background: rgba(0,0,0,0.45);}
																
main section:first-of-type
figure:first-of-type::after {content:"";
															position: absolute;
															inset:0;
															border-radius:6px;
															background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25));
															pointer-events: none;}			
															
.button {display: inline-block;
				background-color: #E87722;
				color: #FFFDF8;
				padding: 12px 22px;
				border-radius: 8px;
				text-decoration: none;
				font-weight: 700;
				font-size: 18px;
				border: 1px solid rgba(0,0,0,0.15);}

.button:hover {background-color: #12324E;}		

main section:last-of-type h2,	
main section:last-of-type p,		
main section:last-of-type .button {grid-column: 1 / -1}		

main section:first-of-type h2 {text-align: center;}		

main section:last-of-type {display: grid;
													grid-template-columns: 2fr 1fr;
													grid-template-rows: auto auto;
													gap: 20px;
													align-items: start;}	

main section:last-of-type h2 {grid-column: 1;
															grid-row: 1;}	

main section:last-of-type p {grid-column: 1;
														grid-row: 2;}	
														
main section:last-of-type .button {grid-column: 2;
																	grid-row: 1 / span 2;
																	align-self: center;
																	justify-self: center;}

main section:last-of-type figure {grid-row: 3;}

main section:last-of-type figure:nth-of-type(1) {grid-column: 1;}

main section:last-of-type figure:nth-of-type(2) {grid-column: 2;}

.bild2 {display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 20px;
				width: 100%;
				grid-column: 1 / -1;
				clear: both;}
				
.bild2 figure {margin: 0;}
				
.bild2 img {width: 100%;
						height: 300px;
						object-fit: cover;
						display: block;}																		
			
footer{background-color: #08253D;
			color: #fff;
			text-align: center;
			padding: 16px;
			margin-top: 40px;
			font-size: 14px;}		


			

@media screen and (max-width: 700px) {
	header {padding: 40px 12px;}
	
	header h1 {font-size:42px;}
	
	nav a {padding: 12px 14px;
				font-size: 16px;}
	
	h2 {font-size: 32px;}
	
	main section:last-of-type {grid-template-columns: 1fr;}
	
	figure:first-of-type figcaption {padding: 8px 14px;}
	
	main section:last-of-type .button {grid-column: 1;
																		grid-row: auto;
																		justify-self: center;
																		align-self: center;}
}	

@media screen and (min-width: 1200px) {
  main {max-width: 1140px;
				padding: 0 24px;}

  header h1 {font-size: 72px;
						letter-spacing: 1.5px;}

  nav a {font-size: 19px;
				padding: 16px 26px;}

  h2 {font-size: 44px;}

  main section:last-of-type {gap: 28px;
														grid-template-columns: 2fr 1fr;}
  .bild2 {gap: 24px;}
  .bild2 img {height: 340px;}
}

@media screen and (min-width: 1440px) {
  main {max-width: 1280px;}

  header {padding: 44px 16px;}

  header h1 {font-size: 80px;}

  nav a {font-size: 20px;
				padding: 16px 30px;}

  h2 {font-size: 48px;
			margin-bottom: 18px;}

  main section:last-of-type {gap: 32px;}

  .bild2 img {height: 380px;}
}

@media screen and (min-width: 1680px) {
  main {max-width: 1400px;}

  header h1 {font-size: 88px;}

  nav a {font-size: 21px;
				padding: 18px 34px;}

  h2 {font-size: 52px;}

  main section:last-of-type .button {font-size: 20px;
																		padding: 14px 26px;}

  .bild2 img {height: 420px;}
}


@media screen and (min-width: 1920px) {
  main {max-width: 1520px;}

  header {padding: 56px 16px;}

  header h1 {font-size: 96px;}

  nav a {font-size: 22px;
				padding: 20px 38px;}

  h2 {font-size: 56px;}

  main section:last-of-type {gap: 36px;}

  .bild2 img {height: 460px;}
}

@media screen and (min-width: 2200px) {
  main {max-width: 1680px;}
}