.blog-cards{display:grid;gap:var(--spacing-8x);grid-template-columns:repeat(auto-fill,minmax(297px,1fr))}.blog-card{background-color:var(--white);border:1px solid var(--blue-300);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--spacing-5x);padding:var(--spacing-6x);transition:var(--transition);&:hover{border-color:var(--red-base);box-shadow:var(--box-shadow-md)}}.blog-card__img{border-radius:var(--radius-md);height:269px;object-fit:cover;width:100%}.blog-card__body{display:flex;flex:1;flex-direction:column;gap:var(--spacing-6x);justify-content:space-between}.blog-card__title{margin-bottom:var(--spacing-3x)}.blog-card__btn{--text-color:var(--red-base);align-items:center;color:var(--text-color);display:flex;font-weight:500;gap:var(--spacing-4x);line-height:1.4;padding-inline:8px 12px;position:relative;width:fit-content;& .blog-card__btn-outline{border:1px solid var(--text-color);border-radius:var(--radius-round);height:34px;inset:50% auto auto 0;position:absolute;transform:translateY(-50%);transition:var(--transition);transition-duration:.5s;width:34px;.blog-card:hover &{width:100%}}& svg{transition:var(--transition);transition-duration:.5s;.blog-card:hover &{transform:translateX(4px)}}}