/*------ layout main ------*/
body {
  padding: 5em;
}

nav {
  display: flex;
  justify-content: center;
  max-width: 100%;
}

.container {
  display: grid;
  gap: 3px;
  padding: 5px;
    grid-template-areas:
    "header header header"
    "left middle right"
    "footer footer footer";

}

.container.main {
  grid-template-columns: 1fr 2fr 1fr;

}

.container div {
  padding: 10px;
}

.container div.header {
  grid-area: header;
  text-align: center;
}

.container div.left {
  grid-area: left;
}

.container div.middle {
  grid-area: middle;
}

.container div.right {
  grid-area: right;
}

.container div.footer {
  grid-area: footer;
  text-align: center;
}

img {
  max-width: 100%;
}


/*----- Pantallas pequeñas (mobile) -----*/
@media (max-width: 768px) {
  .container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
  }
}

@media (max-width: 1180px) {
  nav {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  nav {
    display: flex;
    flex-direction: column;
  }
}