.Blog_Card{ .cardSec { background-color: var(--themeBg2); border-radius: 20px; overflow: hidden; transition: 0.3s; } .cardImg { line-height: 0px; overflow: hidden; aspect-ratio: 416/250; } .cardImg img { transition: 0.3s; } .cardSec:hover .cardImg img { transform: scale(1.1); } .cardHead { font-size: 20px; line-height: 30px; font-weight: 500; color: var(--headingColor2); margin-bottom: 5px; margin-top: 10px; transition: 0.3s; } .cardPara { color: var(--paragraphColorBlack); font-size: 14px; line-height: 24px; font-weight: 400; } .rightSec { padding: 10px 15px; } .btnSec { border-top: 1px solid #eee9db; padding: 10px 15px; } .learnMore { font-size: 15px; font-weight: 500; transition: 0.3s; } .arrow { width: 40px; height: 40px; background-color: var(--themeColor1); border-radius: 50%; transform: rotate(-20deg); transition: 0.3s; } .arrow i { color: var(--paragraphColorWhite); } .cardSec:hover .learnMore { letter-spacing: 1px; } .cardSec:hover .arrow { transform: rotate(0deg); } .cardSec:hover .cardHead { color: var(--themeColor1); } .dateSec { position: absolute; top: -15px; right: 15px; width: fit-content; font-size: 14px; line-height: 24px; background-color: var(--themeColor1); color: var(--paragraphColorWhite); padding: 0px 20px; border-radius: 20px; box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1); } .cardName { font-size: 25px; font-weight: 600; background: linear-gradient(to right, #BF2121 0%, #fff 100%); background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; padding: 10px 15px; text-align: center; margin: 0 auto; } .btnSec{ border-top: 1px solid var(--themeColor1); } }.Blog_Card{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }