.second-part { h4 { font-family: Merriweather; color: #31353d; font-weight: 500; font-size: 24px; } h2 { font-family: Merriweather; color: #31353d; font-weight: 700; font-size: 29px; } } .card { margin-top: auto; margin-bottom: 30px; padding: 24px 15px 8px 15px; border: none; i { align-items: center; display: flex; justify-content: center; background-color: $lightblue; color: white; border-radius: 50%; width: 80px; height: 80px; cursor: pointer; margin-bottom: 10px; font-size: 50px; } h4 { text-align: center; width: 300px; padding-bottom: 19px; font-size: 21px; font-weight: 400; padding-top: 5px; border-bottom: 1px solid #e0e0e8; box-sizing: border-box; } a { color: #333333; text-decoration: none; } p { text-align: center; padding-top: 17px; font-family: MerriweatherSans; color: #777777; letter-spacing: 0; font-weight: 400; font-size: 16px; margin: auto; letter-spacing: 0px; word-wrap: break-word; line-height: 1.4375; } } .view-more { @include button; background-color: $lightblue; border: none; box-shadow: none; outline: none; color: white; } .view-more:hover { background-color: #333333 !important; color: white; transition: 0.2s; ; } @media only screen and (min-width:768px) { .view-more{ margin-bottom: 20px; } .card { p { padding: 0 30px ; } } } @media only screen and (min-width:992px) { .second-part { padding-top: 70px; padding-bottom: 120px; .card{ margin-bottom:56px ; h4{ font-size: 21px; } p { padding: 0 30px ; } } h2 { font-size: 48px; } h4{ font-size: 29px; } } }