.large-mat-card { width: 300px; height: 250px; padding: 0px; cursor: pointer; } .file-mat-card { width: 200px; height: 200px; padding: 0px; cursor: pointer; } .small-mat-card { width: 150px; height: 150px; padding: 0px; cursor: pointer; } .menuButton { right: 0px; top: -1px; position: absolute; z-index: 999; } /* Coerce the icon container away from display:inline */ .mat-icon-button .mat-button-wrapper { display: flex; justify-content: center; } .image-large { width: 300px; height: 167.5px; object-fit: cover; } .image { width: 200px; height: 112.5px; object-fit: cover; } .image-small { width: 150px; height: 84.5px; object-fit: cover; } .example-full-width-height { width: 100%; height: 100% } .centered { margin: 0 auto; top: 50%; left: 50%; } .img-div { max-height: 80px; padding: 0px; margin: 32px 0px 0px -5px; width: calc(100% + 5px + 5px); } .max-two-lines { display: -webkit-box; display: -moz-box; max-height: 2.4em; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; bottom: 5px; position: absolute; } .max-one-line { display: -webkit-box; display: -moz-box; max-height: 1.2em; line-height: 1.2em; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; bottom: 5px; position: absolute; } .duration-time { position: absolute; bottom: 5px; right: 5px; z-index: 99999; background: rgba(255,255,255,0.6); padding-left: 5px; padding-right: 5px; color: black; } .download-time { position: absolute; top: 1px; left: 5px; z-index: 99999; width: calc(100% - 8px); white-space: nowrap; overflow: hidden; display: block; text-overflow: ellipsis; } .audio-video-icon { position: relative; top: 6px; } .title-loading { width: 93%; position: absolute; bottom: 1px; } @media (max-width: 576px){ // .example-card { // width: 175px !important; // } // .image { // width: 175px; // } }