.home-books-book{ cursor: pointer; transition: all 0.5s; border: 1px solid black; padding: 10px; border-radius: 10px; &__light{ border: none; h2{ color: black !important; } } img{ border-radius: 8px; } footer{ margin-top: 20px; } &__info{ padding-bottom: 15px; margin-right: 10px; p { margin: 0px; color: #8C8C8C; } h2{ color: white; } li{ background-color: rgb(85, 85, 85); border-radius: 15px; padding: 3px 6px; margin-left: 3px; color: white; font-family: numeralLight; margin-top: 5px; } } } @media screen and (min-width : 1441px){ .home-books-book{ &:hover{ transform : scale(0.95); background-color: #86868628; } img{ height: 300px; } h2{ font-size: 20px; } p{ font-size: 14px; } li{ font-size: 13px; } } } @media screen and (min-width : 1008px) and (max-width : 1440px){ .home-books-book{ &:hover{ transform : scale(0.95); background-color: #86868628; } img{ height: 250px; // width: 100%; } h2{ font-size: calc(100vw / 80); } p{ font-size: calc(100vw / 130); } li{ font-size: calc(100vw / 140); } } } @media screen and (min-width : 641px) and (max-width : 1007px){ .home-books-book{ img{ height: 200px; border-bottom-left-radius: 25px !important; } h2{ font-size: calc(100vw / 60); } p{ font-size: calc(100vw / 80); } li{ font-size: calc(100vw / 85); } } } @media screen and (max-width : 640px){ .home-books-book{ img{ height: 200px; width : calc(100vw / 2.8); border-bottom-left-radius: 25px !important; } h2{ font-size: calc(100vw / 25); } p{ font-size: calc(100vw / 36); } li{ font-size: calc(100vw / 38); } } }