main.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

$background_C: white;
$serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
  'Helvetica Neue', sans-serif;

body {
  img {
    max-width: 100%;
    max-height: 100%;
  }

  font: {
    family: $serif;
    size: 14px;
  }

  width: 100%;
  height: 100%;
  background: $background_C;

  header {
    width: 100%;

    nav {
      margin: 0 auto;
    }
  }

  main {
    display: flex;

    section {
      flex: 1 1 60%;
      padding: 1em;
      gap: 1em;
      justify-content: center;

      figure {
        max-width: 33%;
      }
    }

    #section-view {
      width: 40%;
      flex: 1 1 40%;

      figure {
        position: fixed;
        max-width: auto;
        width: auto;
        height: 100%;
      }
    }
  }
}

li {
  list-style-type: none;
}


main {
  section {
    display: flex;
    flex-flow: row wrap;
  }
}

.movie-card {
  padding: 1em;
  border: 1px solid rgb(232, 232, 232);
  width: 50%;
  flex: 1 1 calc(50% - 1em);
}

.top-card {
  min-height: 20vh;
  padding-bottom: 2em;

}

.right-data {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  align-items: space-between;

  padding-left: 2em;
}

.bottom-card {
  border-top: 1px solid rgb(232, 232, 232);
  padding-top: 1em;
}

.big-img {
  width: 100%;
  max-width: 100%;

  img {
    max-height: calc(100vh - 4em);
    max-width: 100%;
    width: auto;
    height: 100%;
  }
}

@media only screen and (max-width: 1200px) {
  #section-view {
    display: none;
  }

  section {
    width: 100%;
    flex: 1 1 100%;
  }

  main {
    section {
      display: flex;
      // flex-flow: column wrap;
    }
  }

  .movie-card {
    width: 100%;
    flex: 1 1 calc(100% - 1em);
  }

  html body main section div.movie-card div.top-card figure.film-img img {
    min-width: 50%;

    height: auto;
  }
}