.tileItem { background: #333; padding: 10px 7px 5px; margin: 3px 0; text-shadow: none; font-weight: normal!important; display: block; position: relative; } .tileItem .starRating { width: 16px; height: 14px; } .tileItem .rottentomatoesicon { height: 14px; width: 14px; } .tileItem .criticRating { position: relative; top: -1px; font-size: 13px; } .tileImage { display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center top; } .defaultTileImage { background-color: #999; } .tileItem p { margin: .5em 0 0; } .tileContent { display: inline-block; padding-left: 10px; color: #fff; text-align: left; vertical-align: top; overflow: hidden; } .backdropTileItem .tileImage { height: 90px; width: 45%; } .backdropTileItem .tileContent { width: 50%; } .posterTileItem .tileImage { height: 120px; width: 30%; } .posterTileItem .tileContent { width: 65%; } .smallPosterTileItem .tileImage { height: 95px; width: 30%; } .smallPosterTileItem .tileContent { width: 65%; } .smallPosterTileItem .tileName { font-weight: normal; } .smallBackdropTileItem .tileImage { height: 125px; width: 45%; } .smallBackdropTileItem .tileContent { width: 50%; } .smallBackdropTileItem .tileName { font-weight: normal; } .squareTileItem .tileImage { height: 100px; width: 35%; } .squareTileItem .tileContent { width: 60%; } .tileName { font-weight: bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .tileName + .tileName { margin-top: .75em; } .tileItem .userDataIcons img { height: 18px; width: 18px; } @media all and (min-width: 600px) { .smallPosterTileItem { width: 210px; display: inline-block; margin: 3px; } } @media all and (min-width: 750px) { .tileItem { display: inline-block; margin-left: 3px; margin-right: 3px; } .smallBackdropTileItem { display: block; } .backdropTileItem, .posterTileItem, .squareTileItem { width: 46%; } .backdropTileItem .tileImage { height: 88px; } .posterTileItem .tileImage { height: 120px; } .squareTileItem .tileImage { height: 115px; } } @media all and (min-width: 850px) { .smallBackdropTileItem { width: 370px; display: inline-block; } .smallBackdropTileItem .tileImage { height: 95px; } .backdropTileItem .tileImage { height: 105px; } .posterTileItem .tileImage { height: 120px; } .posterTileItem { width: 30.5%; } .tileItem p { margin: .75em 0 0; } .tileItem .itemProgress { font-size: 17px; } } @media all and (min-width: 1000px) { .backdropTileItem, .posterTileItem, .squareTileItem { width: 47.5%; } .posterTileItem { width: 31%; } .backdropTileItem .tileImage { height: 110px; } .posterTileItem .tileImage { height: 136px; } .squareTileItem { width: 31%; } .squareTileItem .tileImage { height: 105px; } } @media all and (min-width: 1200px) { .backdropTileItem .tileImage { height: 100px; } .posterTileItem .tileImage { height: 160px; } .backdropTileItem, .posterTileItem, .squareTileItem { width: 31.5%; } .squareTileItem .tileImage { height: 130px; } } @media all and (min-width: 1440px) { .backdropTileItem .tileImage { height: 110px; } .posterTileItem .tileImage { height: 150px; } .backdropTileItem, .squareTileItem { width: 31.5%; } .squareTileItem .tileImage { height: 155px; } .posterTileItem { width: 23.5%; } } @media all and (min-width: 1700px) { .backdropTileItem .tileImage { height: 132px; } .posterTileItem .tileImage { height: 170px; } .backdropTileItem { width: 32%; } .posterTileItem { width: 23.5%; } .squareTileItem { width: 23.5%; } .squareTileItem .tileImage { height: 140px; } } @media all and (min-width: 1920px) { .backdropTileItem { width: 31.5%; } .tileImage { height: 155px; } .posterTileItem { width: 18.8%; } .posterTileItem .tileImage { height: 160px; } .squareTileItem { width: 18.8%; } .squareTileItem .tileImage { height: 120px; } } @media all and (min-width: 2000px) { .backdropTileItem { width: 23.5%; } .tileImage { height: 117px; } .posterTileItem { width: 18.8%; } .posterTileItem .tileImage { height: 160px; } .squareTileItem { width: 18.8%; } .squareTileItem .tileImage { height: 130px; } } @media all and (min-width: 2200px) { .backdropTileItem { width: 24%; } .tileImage { height: 145px; } .posterTileItem { width: 18.8%; } .posterTileItem .tileImage { height: 185px; } .squareTileItem { width: 18.8%; } .squareTileItem .tileImage { height: 140px; } } @media all and (min-width: 2540px) { .backdropTileItem { width: 18.75%; } .tileImage { height: 120px; } .posterTileItem { width: 15.8%; } .posterTileItem .tileImage { height: 180px; } .squareTileItem { width: 15.8%; } .squareTileItem .tileImage { height: 140px; } }