.slider-blog { cursor: pointer; margin: 10px; padding: 10px 15px; box-shadow: 0px 0px 5px rgb(200, 200, 200); border-radius: 15px; width: 100%; text-decoration: none; position: relative; max-width: 300px; a { text-decoration: none; color: #4e4e4e; } img { width: 100%; height: 200px; border-radius: 10px; } h1 { font-family: numeralMedium; margin-top: 15px; color: #6f7074; } h2 { font-family: numeralLight; margin-top: 5px; color: #a5a5a5; } &__category { font-family: numeralMedium; position: absolute; top: 20px; left: 23px; color: white; padding: 5px 7px; border-radius: 5px; } &__footer { width: 100%; align-items: center; justify-content: space-between; a { font-family: numeralMedium; padding: 6px 12px; background-color: #e6e6e6; color: #02733c; text-decoration: none; border-radius: 5px; &:hover { color: #02733c; } } span { font-family: numeralLight; color: #a5a5a5; letter-spacing: -1px; } } } .mobile-slider-blog { margin: 10px; padding: 5px 5px; // box-shadow: 0px 0px 5px rgb(200, 200, 200); border: 1px solid #eee; border-radius: 15px; width: 100%; text-decoration: none; position: relative; cursor: pointer; a { text-decoration: none; } img { // width: 100%; height: 150px; border-radius: 10px; margin: 0 auto; } h1 { font-family: numeralMedium; margin-top: 8px; font-size: 15px; color: #6f7074; text-decoration: none; } h2 { font-family: numeralLight; margin-top: 5px; font-size: 12px; text-decoration: none; color: #a5a5a5; } &__category { font-family: numeralLight; position: absolute; top: 10px; left: 10px; color: white; padding: 5px 7px; border-radius: 5px; font-size: 12px; background-color: #ffffff44; } &__footer { width: 100%; align-items: center; justify-content: space-between; a { font-family: numeralLight; font-size: 11px; padding: 3px 6px; background-color: #e6e6e6; color: #02733c; text-decoration: none; border-radius: 5px; font-size: 10px; &:hover { color: #02733c; } } span { font-family: numeralLight; font-size: 11px; color: #a5a5a5; letter-spacing: -1px; } } }