*{
  box-sizing: border-box;
}

body {
  background-color: #FEF6D5;
  margin:0px;
}

.container{
  height:100vh;
  background: url(/errors/assets/imgs/soil.webp) no-repeat;
  background-size: contain;
  background-position-y: bottom;
}

.container .img-box {
  height:30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .img-box img{
  width: 110px;
}

.container .text-box{
  display: flex;
  flex-direction: column;
 }

.container .text-box h1 {
  font: normal normal 600 50px/69px Myriad Pro;
  color: #333333;
  text-transform: uppercase;
  text-align: center;
  margin:8px;
}

.container .text-box h3{
  font: normal normal 300 28px/40px Nunito;
  color: #333333;
  text-align:center;
  width: 630px;
  margin: 0 auto;
}

@media (max-width:580px){
  .container {
    background-size: 250%;
    background-position-y: 70%;
    background-position-x: 25%;
  }
  section.container:after {
    background: transparent linear-gradient(180deg, #734B1D 0%, #663D1B 0%, #582E19 0%, #734B1D 29%, #734B1DE3 60%, #734B1D3F 75%, #734B1D26 85%, #734B1D00 100%) 0% 0% no-repeat padding-box;
    height: 60%;
    width: 100%;
    content: '';
    position: absolute;
    top: 74.5%;
  }
  .container .img-box {
    align-items:flex-end;
  }
  .container .img-box a {
    width:30%;
  }
  .container .img-box a img{
    width:100%;
  }
  .container .text-box{
    padding-top: 2rem;
  }
  .container .text-box h1 {
    font: normal normal 600 25px/40px Myriad Pro;
  }
  .container .text-box h3 {
    font: normal normal 300 18px/24px Nunito;
    width:90%;
  }
}