:root {
  --color-fondo: #26352f; /* Fondo oscuro */
  --color-degradado-primario: linear-gradient(
    135deg,
    #145214,
    #1e824c
  ); /* Verde degradado oscuro */
  --color-degradado-secundario: linear-gradient(
    135deg,
    #1e824c,
    #8fd89a
  ); /* Verde degradado claro */
  --color-degradado-acento: linear-gradient(
    135deg,
    #0f3c0f,
    #0a6b3c
  ); /* Verde acento */
  --borde: 2px solid #1e824c;
  --espaciado: 28px;
  --radius: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  padding: var(--espaciado);
  background-color: var(--color-fondo);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto repeat(6, 1fr) auto;
  gap: var(--espaciado);
  box-sizing: border-box;
}

header,
main,
footer {
  padding: var(--espaciado);
  background: var(--color-degradado-secundario);
  border-radius: var(--radius);
  text-align: center;
  color: #ffffff;
  align-content: center;
}

header {
  grid-column: 1 / 3;
  grid-row: 1/ 6;
  text-align: center;
  align-content: center;
}
h1 {
  font-size: 3rem;
  margin: 0;
}

.school {
  grid-column: 5 / 7;
  grid-row: 1/ 4;
  background-image: url('https://images03.nicepage.com/c461c07a441a5d220e8feb1a/d8ce469044b958508f4bdbab/blueschoolbackpackwithessentialsupplies_232148207678.jpg');
  background-size: cover;
  border-radius: var(--radius);
}

.student {
  grid-column: 3 / 5;
  grid-row: 1/ 4;
  background-image: url('https://images03.nicepage.com/c461c07a441a5d220e8feb1a/9e4ce16148dd5cbeb1065410/89f80abe-6acd-d8dc-a341-3e571206975b.jpg');
  background-size: cover;
  border-radius: var(--radius);
}

main {
  grid-column: 3/ 5;
  grid-row: 4/ 6;
  background: var(--color-degradado-acento);
  border-radius: var(--radius);
  color: #145214;
}
main > h2 {
  color: white;
  font-size: 2.2rem;
}

.time {
  grid-column: 5 / 7;
  grid-row: 4/ 6;
  background-image: url('https://images03.nicepage.com/c461c07a441a5d220e8feb1a/773a5aa425b1502aaac14708/f2b45624-c8f6-3aa0-0ee4-58adda3c89b0.jpg');
  background-size: cover;
  border-radius: var(--radius);
}

.alumni {
  grid-column: 1 / 3;
  grid-row: 6/ 8;
  background-image: url('https://images03.nicepage.com/c461c07a441a5d220e8feb1a/89993ff69c3e5244ad2bf1ba/blondestudentgirlissmilingholdingfoldernotebookherhandsuniversitybackground_101969664.jpg');
  background-size: cover;
  border-radius: var(--radius);
}

footer {
  grid-column: 3 / 7;
  grid-row: 6/ 8;
  background: var(--color-degradado-secundario);
  border-radius: var(--radius);
  color: white;
}
footer > h3 {
  font-size: 3rem;
}
p {
  font-size: 1.5rem;
}

button {
  padding: 10px 20px;
  border: none;
  background-color: #1e824c;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #145214;
}

/* Media Queries para que todo sea Responsivo  */

@media (max-width: 1200px) {
  body {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto repeat(8, 1fr) auto;
  }
  header {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
  }
  .school {
    grid-column: 1 / 3;
    grid-row: 3 / 6;
  }
  .student {
    grid-column: 3 / 5;
    grid-row: 3 / 6;
  }
  main {
    grid-column: 1 / 5;
    grid-row: 6 / 8;
  }
  .time {
    grid-column: 1 / 3;
    grid-row: 8 / 10;
  }
  .alumni {
    grid-column: 3 / 5;
    grid-row: 8 / 10;
  }
  footer {
    grid-column: 1 / 5;
    grid-row: 10 / 12;
  }
}

@media (max-width: 900px) {
  body {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto repeat(10, 1fr) auto;
  }
  header {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .school {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }
  .student {
    grid-column: 1 / 3;
    grid-row: 4 / 6;
  }
  main {
    grid-column: 1 / 3;
    grid-row: 6 / 8;
  }
  .time {
    grid-column: 1 / 3;
    grid-row: 8 / 9;
  }
  .alumni {
    grid-column: 1 / 3;
    grid-row: 9 / 10;
  }
  footer {
    grid-column: 1 / 3;
    grid-row: 10 / 11;
  }
}

@media (max-width: 600px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: auto repeat(12, 1fr) auto;
  }
  header {
    grid-column: 1;
    grid-row: 1;
  }
  .school {
    grid-column: 1;
    grid-row: 2 / 4;
  }
  .student {
    grid-column: 1;
    grid-row: 4 / 6;
  }
  main {
    grid-column: 1;
    grid-row: 6 / 8;
  }
  .time {
    grid-column: 1;
    grid-row: 8 / 9;
  }
  .alumni {
    grid-column: 1;
    grid-row: 9 / 10;
  }
  footer {
    grid-column: 1;
    grid-row: 10 / 11;
  }
}