@media screen and (min-width:1024px) { .root { width: 250px * .75; height:230px; border-radius: 5px; position: relative; } .cardContent { padding: 8px 4px 0 4px !important; } .smallGridContainerSpacing { margin: -2px -8px !important; } .smallGridItemSpacing { padding: 0px 8px !important; } .media { flex: 1; height: 115px * .75; } .logoContainer { width: 100px * .75; height: 100px * .75; margin: auto; margin-top: -60px * .75; border-radius: 50%; border: 5px solid white; } .logo { width: 100px * .75; height: 100px * .75; margin: auto; border-radius: 50%; box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .extraInfoWrapper { display: flex; align-items: center; max-width: 50%; } .twoLineEllipsis { position: relative; line-height: 1em; max-height: 2em; overflow: hidden; } .twoLineEllipsisWebkit { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } @media screen and (min-width:1680px) { .root { width: 250px; border-radius: 5px; position: relative; } .cardContent { padding: 8px 4px 0 4px !important; } .smallGridContainerSpacing { margin: -2px -8px !important; } .smallGridItemSpacing { padding: 3px 8px !important; } .media { flex: 1; height: 115px; } .logoContainer { width: 100px; height: 100px; margin: auto; margin-top: -60px; border-radius: 90px; border: 5px solid white; } .logo { width: 100px; height: 100px; margin: auto; border-radius: 50%; box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); } .extraInfoWrapper { display: flex; align-items: center; max-width: 50%; } .twoLineEllipsis { position: relative; line-height: 1em; max-height: 2em; overflow: hidden; } .twoLineEllipsisWebkit { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }