.slider-blog { 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; img { width: 100%; height: 200px; border-radius: 10px; } h1 { font-family: numeralBold; margin-top: 15px; font-size: calc(100vw / 80); color: #6f7074; } h2 { font-family: numeralLight; margin-top: 5px; font-size: calc(100vw / 100); color: #a5a5a5; } &__category{ font-family: numeralMedium; position: absolute; top: 20px; left: 23px; color: white; padding: 5px 7px; border-radius: 5px; font-size: calc(100vw / 120); } &__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; font-size: calc(100vw / 120); &:hover{ color: #02733c; } } span{ font-family: numeralLight; font-size: calc(100vw / 120); color: #a5a5a5; letter-spacing: -1px; } } } .mobile-slider-blog { margin: 10px; padding: 5px 8px; box-shadow: 0px 0px 5px rgb(200, 200, 200); border-radius: 15px; width: 100%; text-decoration: none; position: relative; img { width: 100%; height: 150px; border-radius: 10px; } h1 { font-family: numeralBold; margin-top: 15px; font-size: calc(100vw / 35); color: #6f7074; } h2 { font-family: numeralLight; margin-top: 5px; font-size: calc(100vw / 50); color: #a5a5a5; } &__category{ font-family: numeralMedium; position: absolute; top: 10px; left: 13px; color: white; padding: 5px 7px; border-radius: 5px; font-size: calc(100vw / 60); } &__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; font-size: calc(100vw / 50); &:hover{ color: #02733c; } } span{ font-family: numeralLight; font-size: calc(100vw / 50); color: #a5a5a5; letter-spacing: -1px; } } }