.main {
  grid-area: main;
  overflow-y: auto; /* Agrega desplazamiento vertical si el contenido es más alto que el contenedor */
  padding: 20px; /* Ajusta el espaciado interno del área principal */
  margin: 10px; /* Agrega margen alrededor del área principal */
  background-color: rgba(255, 255, 255, 0.2); /* Color blanco con transparencia para lograr el efecto esmerilado */
  backdrop-filter: blur(10px); /* Aplica un desenfoque para el efecto de vidrio esmerilado */
  -webkit-backdrop-filter: blur(10px); /* Prefijo para soporte de Safari */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Borde sutil para definir los bordes */
  border-radius: 4px; /* Bordes redondeados para todo el contenedor */
  box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75); /* Sombra para la elevación */
}

/* Para dispositivos más grandes, asegúrate de que main no exceda el tamaño de la ventana gráfica */
@media (min-width: 900px) {
  .main {
    max-height: calc(100vh - 130px - 50px - 10px); /* Altura máxima teniendo en cuenta header y footer */
    overflow-y: auto; /* Agrega desplazamiento vertical si es necesario */
  }
}

/* Ajusta el max-height para tablets */
@media (min-width: 600px) and (max-width: 899px) {
  .main {
    max-height: calc(100vh - 130px - 50px - 50px - 10px); /* Altura máxima teniendo en cuenta header, navbar y footer */
  }
}

/* Ajustes para dispositivos móviles si es necesario */
@media (max-width: 599px) {
  .main {
    max-height: calc(100vh - 130px - 50px - 50px - 10px); /* Ajusta según sea necesario para dispositivos móviles */
  }
}