*{box-sizing: border-box;}

html, body {margin: 0;
						padding: 0;}

body {background-color: #FFFDF8;
			color: #333;
			font-family: Georgia, "Times New Roman", serif;
			margin: 0;
			line-height: 1.2;}
			
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);}

.botton:hover {background-color: #cc5f0f;}		

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;}																	
			
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;}
	}