body{background-image: url(filteredbgimage.jpg);background-repeat: no-repeat;background-size: cover;}
img{ width: 100%; height: 100%; display: block;size: cover;}
h1{text-align: center;margin-top: 50px; margin-bottom: 50px;font-family: Playfair Display;font-weight: 400; font-size: 41px;;}
h3{text-align: center;}
h2{font-family: Playfair Display; margin-top: 10px; margin-bottom: 10px;}
p1{font-family: Playfair Display;}
h3{font-family: PT Serif Caption;}
p2{font-family: PT Serif Caption;}
p3{font-family: Playfair Display; text-align: right;}


.container {display: grid; 
grid-template-areas: "firstimage about" "text1 about" "secondimage about" "text2 about";grid-template-columns: 850px 450px;padding-right: 50px;grid-template-rows: 500px auto 500px auto;}
.firstimage{grid-column: 1/span 1; grid-row: 1/span 1;}
.text1{grid-column: 1/span 1; grid-row: 2/span 1;}
.secondimage{grid-column: 1/span 1; grid-row: 3/span 1;}
.text2{grid-column: 1/span 1; grid-row: 4/span 1;}
.about{grid-column: 2/span auto; grid-row: 1/span 3;}

.container > div.firstimage{margin-top: 40px;margin-left: 50px; margin-right: 50px;box-shadow: 5px 5px 5px slategray}
.container > div.secondimage{margin-top: 40px;margin-left: 50px; margin-right: 50px;box-shadow: 5px 5px 5px slategray}
.container > div.text1{margin-left: 50px; margin-right: 50px; padding-inline: 3% 3%; background-color: #fffffc; opacity: 81%;
box-shadow: 5px 5px 5px slategray;}
.container > div.text2{margin-left: 50px; margin-right: 50px; padding-inline: 3% 3%; background-color: #fffffc; opacity: 81%;
box-shadow: 5px 5px 5px slategray;}
.container > div.about{margin-top: 20px;margin-left: 150px;margin-right: 50px ;background-color: #fffffc; opacity: 81%; padding-inline: 7% 7%;
box-shadow: 5px 5px 5px 5px #fffffc; text-align: center;}