mister-webdev / movie-app

src/pages/movie/movie.module.scss

@import '@/styles/vars.scss';

Imported partial @/styles/vars.scss should be written as @/styles/vars

.wrapper {
  position: relative;

Properties should be ordered background-attachment, background-position, background-repeat, background-size, box-shadow, margin-top, min-height, overflow, position, z-index

  z-index: 2;
  margin-top: -$header-height;
  min-height: 100vh;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 5px 20px -10px #000;

Color literals like #000 should only be used in variable declarations; they should be referred to via variable everywhere else.

  overflow: hidden;

  &::after {
    content: '';

Properties should be ordered background, box-shadow, content, height, left, position, top, width, z-index

    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00000085;
    box-shadow: inset 345px 0px 100px -5px #0000004d;

0px should be written without units as 0

  }
}

.content {
  position: relative;

Properties should be ordered background-color, border-radius, position, z-index

  z-index: 3;
  background-color: rgba(0, 0, 0, 0.075);

Color literals like rgba(0, 0, 0, 0.075) should only be used in variable declarations; they should be referred to via variable everywhere else.

0.075 should be written without a leading zero as .075

  border-radius: 10px;

  & >:not(:last-child) {

Unnecessary parent selector (&)

    margin-bottom: 16px;
  }
}

.rowHalf {

Selector rowHalf should be written in lowercase with hyphens

  position: relative;

Properties should be ordered display, gap, grid-template-columns, justify-items, margin, max-width, padding, position, z-index

  z-index: 3;
  margin: $header-height * 2 auto;  

Line contains trailing whitespace

  padding: 20px;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  justify-items: center;
  gap: 20px;

Unknown property gap

}

.genres {
  display: flex;

Properties should be ordered align-items, display, flex-wrap

  align-items: center;
  flex-wrap: wrap;
}

.genreItem {

Selector genreItem should be written in lowercase with hyphens

  display: inline-flex;

Properties should be ordered align-items, display

  align-items: center;
}