.films-selection.films-format-grid {
  display: flex;
  flex-wrap: wrap;
}

.films-selection.films-format-grid .film-item {
  width: 100%;

  @media (min-width: 37.5em) {
    width: calc(50% - 0.5em);
  }
}

@supports (display: grid) {
  .films-selection.films-format-grid {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: 1fr;

    @media (min-width: 37.5em) {
      /* Partially responsive fallback */
      grid-template-columns: repeat(auto-fill, minmax(calc(10% + 12.5rem), 1fr));

      /* Fully responsive version */
      grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));

    }
  }

  .films-selection.films-format-grid .film-item {
    width: auto;
  }
}

.films-selection figure,
.films-selection p,
.films-selection h1,
.films-selection h2,
.films-selection h3,
.films-selection h4,
.films-selection h5,
.films-selection h6,
.films-selection ul {
  margin: 0.5em 0;
}

.films-selection.film-countries-year-genres-duration {
  font-size: 0.8em;
}

.films-selection p,
.films-selection ul,
.films-selection ol {
  font-size: 0.9em;
}

.films-selection .film-direction-section {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1em;
}

.films-selection .film-direction {
  font-weight: bold;
}

.films-selection .film-direction-bio,
.films-selection .film-direction-filmography {
  font-size: 0.8em;
}

.films-selection img {
  width: 100%;
  max-width: 100%;
  height: auto;
}