header {
    color:rgb(77, 77, 77);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.brand{
    font-size: 300%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
main{
    background:rgb(255, 255, 255)
}
.lang-switch{
    text-align: right;
    font-size: 200%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.grid-2 { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 28px; 
    align-items: center; }
.grid-3 { display: grid; 
    grid-template-columns: 
    repeat(3, 1fr); 
    gap: 20px; }

h1, h2 {
    text-align: center;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

p{
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

img{
    width: 400px;
}

footer{
    text-align: center;
    font-size: 150%;
    background-color: cornflowerblue;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    border-top: 1px solid #eee; 
    padding: 16px 0;
    margin-top: 40px;
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}

.site-header{
  background: url("../img/hero.jpg") center/cover no-repeat;
  position: relative; padding: 96px 0; color:#ffffff00; text-align:center;
}
.site-header::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255, 255, 255, 0);
    pointer-events:none; z-index:0;
}