@import url("./style.css");
@import url("./components/poster.css");
@import url("./components/card-vertical.css");

* {
  margin: 0;
  padding: 0;
}

.titulo-cartelera {
  text-align: center;
  font-size: 36px;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.titulo-pelicula {
  font-size: 28px;
}

.container-cartelera {
  margin: var(--space-l);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  gap: var(--space-l);

  grid-template-areas:
    "pelicula-1 pelicula-2 pelicula-2 pelicula-3"
    "pelicula-4 pelicula-4 pelicula-5 pelicula-6";
}

@media screen and (max-width: 600px) {
  .container-cartelera {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pelicula-2"
      "pelicula-1"
      "pelicula-3"
      "pelicula-4"
      "pelicula-5"
      "pelicula-6";
  }

  .poster-grid img {
    max-height: 300px;
  }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
  .container-cartelera {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pelicula-1 pelicula-2"
      "pelicula-3 pelicula-4"
      "pelicula-5 pelicula-6";
  }
}