@charset "UTF-8";

body {
  background-color: rgb(189, 153, 107);
}

.container {
  display: grid;
  gap: 5px;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(4, 1fr);
  box-shadow: 10px 10px 10px rgba(107, 70, 0, 0.418);
}

.caixa1 {
  background-color: rgb(235, 214, 188);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;

  grid-row: 1 / span 1;
  grid-column: 1 / 5;
}

.caixa2 {
  background-color: rgb(221, 196, 164);
  display: flex;
  justify-content: center;
  align-items: center;

  grid-row: 2 / 4;
  grid-column: 1 / 3;
}

.caixa3 {
  background-color: rgb(207, 178, 139);
  grid-row: 2 / 4;
  grid-column: 3 / 5;
  display: flex;
  justify-content: center;
  align-items: center;
}

div a {
  text-decoration: none;
  color: rgb(0, 0, 0);
  margin: 5px;
  background-color: rgb(214, 187, 153);
  border-radius: 10px;
  padding: 10px;
}
div a:hover {  
  text-decoration: underline;
  transition: 0.4s;
  background-color: rgb(223, 195, 163);
}