*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}


header{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  max-height: 600px;
  
}

header .hero { 
  display: grid;
  grid-template-columns: 4fr 1fr 4fr; 
  grid-template-rows: 1fr 6fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

/* LEFT PART */
.left { 
  grid-area: 1 / 1 / 3 / 3;
  border: 10px solid #008a2a;
  padding: 30px;
  position: relative;
  background-color: #FFFFFF;
  z-index: 2;
}
.left h1{
  text-transform: uppercase;
  /* font-size: clamp(2rem, 5vw + 1rem , 1rem); */
  white-space: nowrap;
  text-align: center;
}

.left p{
  margin-top: 25px;
  margin-bottom: 50px;
  font-size: 16px;
}


/* RIGHT PART */
.right { 
  grid-area: 2 / 2 / 4 / 4;
  border: 10px solid #008a2a;
  z-index: 1;
  position: relative;
}

.right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LEFT AND RIGHT BANDS */
.left::before,
.right::before{
  content: '';
  position: absolute;
  top: 50%;
  height: 50%;
  width: 50vw;
  background: #008a2a;
}
.left::before{
  left: 0;
  transform: translateY(-50%) translateX(-100%);
}
.right::before{
  right: 0;
  transform: translateY(-50%) translateX(100%); 
}

@media screen and (max-width: 450px){
  header .hero { 
  grid-template-rows: 6fr 1fr 6fr;
  }
  .left{
    grid-area: 1 / 1 / 3 / 4;
  }
  .right{
    grid-area: 2 / 1 / 4 / 4
  }
  
  .container-hero{
  margin-top: 250px;
  margin-bottom: 280px;
  }
  
  .left h1{
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 100;
  white-space: nowrap;
  }
  
  .left { 
  grid-area: auto / auto / auto / auto;
  border: 10px solid #008a2a;
  padding: 30px;
  position: relative;
  background-color: #FFFFFF;
  z-index: 2;
}
  .left p{
    padding: 0px;
    text-align: center;
  }
}

@media screen and (max-width: 1200px){
  
  .container-hero{
  margin-top: 300px;
  margin-bottom: 250px;
    
  }