@media screen and (min-width: 200px) and (max-width: 765px){ .course-card-view { min-width: calc(100% - 0.5rem) !important; max-width: calc(100% - 0.5rem) !important; } } @media screen and (min-width: 766px) and (max-width: 986px){ .course-card-view { min-width: calc(50% - 0.5rem) !important; max-width: calc(50% - 0.5rem) !important; } } @media screen and (min-width: 987px) and (max-width: 1250px){ .course-card-view { min-width: calc(33% - 0.5rem) !important; max-width: calc(33% - 0.5rem) !important; } } @media screen and (min-width: 1251px) and (max-width: 4080px){ } .course-card-view { box-shadow: 5px 5px 9px -4px rgba($black, .1); padding-bottom: 4rem; min-width: calc(25% - 0.5rem); max-width: calc(25% - 0.5rem); .course-card-img div { height: 6.5rem; background-position: top right; background-size: cover; } .card-see-more { position: absolute; bottom: 0; width: 100%; .btn { width: 90%; } } } body#page-enrol-index { .box.generalbox > div { @extend .course-card-view; position: relative; } } .minheight{ background-position: top center !important; } .boxCursos { transition: box-shadow .3s; border: 1px solid #ccc; float: left; } .boxCursos:hover { -webkit-box-shadow: 0px 0px 14px -2px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 14px -2px rgba(0,0,0,1); box-shadow: 0px 0px 14px -2px rgba(0,0,0,1); }