.container{
max-width: 1512px;
margin: 0 auto;
background-color: white;
max-height: fit-content !important;
}
body{
font-family: "Poppins", sans-serif;
}
header {
max-width: 1512px;
max-height: 900px;
margin: 0 auto;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)),
url('../src/images/hero.png');
background-repeat: no-repeat;
background-size: cover;
color: white;
text-align: center;
padding: 10% 5%;
}

h1{
font-size: 96px;
font-weight: 700;
line-height: 1;
margin: 30px 0;
}
h2{
font-size: 40px;
font-weight: 400;
line-height: 60px;

}
h3{
font-size: 24px;
font-weight: 900;
line-height: 1.5;
letter-spacing: 5px;
margin: 0;
}
header a {
width: Hug (179px)px;
height: Hug (53px)px;
padding: 16px 32px 16px 32px;
gap: 10px;
opacity: 0px;
text-transform: uppercase;
color:rgba(39, 32, 68, 1);
font-size: 14px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 3px;
text-align: center;
background-color: white;
text-decoration: none;
display: inline-block;
}

footer ul {
list-style-type: none;
padding-left: 0;
}

footer li a {
color: white !important;
opacity: 0.7;
text-decoration: none;
}

footer h3{
font-weight: 700;
font-size: 18px;
line-height: 30px;
text-align: left;
color: white;
}

footer p{
font-size: 16px;
font-weight:400;
line-height: 24px;
color:rgba(255, 255, 255, 1);
opacity: 0.7;
text-align: left;
}

.grid { 
background-image:linear-gradient(rgba(39, 32, 68, 0.9), rgba(39, 32, 68, 0.9)), 
url('../src/images/lisbonCitySky.png');
background-repeat: no-repeat;
background-size: cover;
padding: 100px 100px;
display: grid;
grid-template-columns: 1.4fr 2fr 2fr;
color: white;
grid-gap: 64px;
margin: 0;
}

section h2{
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 5px;
text-align: left;
color: black;
opacity: 30%;
}
section h3{
font-size: 40px;
font-weight: 700;
line-height: 1.5;
text-align: left;
letter-spacing: 1px;
color:rgba(39, 32, 68, 1);
;
}
section p{
font-size: 16px;
font-weight: 400;
line-height: 1.3;
text-align: left;
opacity: 70%;
padding: 24px, 32px auto;
}

section h4{
font-size: 24px;
font-weight: 700;
line-height: 1;
margin-top: 0 !important;
margin-bottom: 10px !important;
}

section h5{
font-size: 13px;
font-weight: 700;
line-height: 19.5px; 
margin: 0 0 10px;  
text-align: left;
}

.primary-section-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-gap: 64px;
padding:64px 142px;
}

.building-img{
width: 570px;
height: 461px;
background-size: cover;
}

.cafe-section{
background:rgba(248, 248, 248, 1) !important;
padding: 40px 171px;
max-width: 1512px ;
text-align: center;
}

.cafes,
.image-section {
text-align: center !important;
display: block;
}


.grid-3-columns{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 64px 20px;
grid-auto-rows: 1fr;
}

.card{
background-color: white;
display: flex;
flex-direction: column;
margin:0;
height: 100%;
overflow: hidden;
max-width: 370px;
border-radius: 2px;
}
.img, 
.embed {
flex: 1 1 50%;
max-width: 50%;
height: auto;
aspect-ratio: 1/1;
grid-gap:0;
}

.card-header {
display: flex;
grid-template-columns: 1fr 1fr;
gap:0px;
flex-wrap: nowrap;
}
.card-body{
padding: 20px 30px;
display: flex;
flex-direction: column;
flex: 1;
}
.card-body h4, .card-body h5 {
text-align: left;
margin:0;
}
.card-body p {
margin: 0 0 10px;
}
.button{
display: inline-block;
padding: 16px 32px 16px 32px;
text-decoration: none;
background: rgba(70, 44, 178, 1);
text-transform: uppercase;
color: white;
text-align: center;
width: 70%;
}
.card-footer {
margin-top: auto;
padding: 0;
text-align: center;
}

.instagram-media {
display: block;
width: 100%;
max-width: 370px !important;
max-height: 370px !important;
margin: 0 auto;
overflow:hidden;
}
.instagram-gallery{
display: block;
margin: 0 auto;
text-align: center;
}
.gallery-grid-container{
display: block;
max-width: 1170px;
max-height: auto !important;
padding:64px 171px 80px 171px;
text-align: center !important;
margin: 0 auto;
}
.footer-header h4{
font-size: 20px !important;
text-align: left;
color: rgba(255, 255, 255, 1) !important;
}
.footer-message{
    color: #261f40;
    text-align: center;
}

@media(max-width: 900px){

img {
max-width: 100%;
height: auto;
margin: 0 auto;
padding: 10px 0 !important;
}
header {
padding: 0 15px auto;
}

h1 {
font-size: 24px;
}

h2, h3 , h3.cafes, h4.cafe, h4.footer-header {
font-size: 18px !important;
padding:0 8px auto;
text-align: center !important;
}

header a {
padding: 8px 15px auto;
letter-spacing: 1px;
}

.card-header .grid-2-columns {
grid-template-columns: 1fr;
padding: 0 auto !important;
text-align: center !important;
}
.grid-3-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
gap: 15px;
padding-top: 15px;
}
.gallery-grid-container, 
.primary-section-grid,
.cafe-section, 
.grid,
p {
margin: auto;
padding: 5px !important;
grid-template-columns: 1fr;
text-align: center;
grid-gap:0;
}
p{
font-size: 14px !important;
}
.embed{
display: none;
}

.building-img{
width: 100%;
max-height: 200px;
object-fit: cover;
}

.instagram-media {
max-width: 50% !important;
width: 90px !important ;
margin: 0 auto !important;
aspect-ratio: 16/9;
grid-template-columns: 1fr 1fr;
}
.gallery-grid-container {
grid-gap:5px;
max-width: 100%;
margin: 0 auto;
}
}