.nav-cards{display:grid;gap:var(--spacing-8x);grid-template-columns:repeat(auto-fill,minmax(297px,1fr))}.nav-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)}}.nav-card__img{aspect-ratio:4/3;border-radius:var(--radius-md);object-fit:cover;width:100%}.nav-card__body{display:flex;flex:1;flex-direction:column;gap:var(--spacing-6x);justify-content:space-between}.nav-card__title{margin-bottom:var(--spacing-3x)}.nav-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;& .nav-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;.nav-card:hover &{width:100%}}& svg{transition:var(--transition);transition-duration:.5s;.nav-card:hover &{transform:translateX(4px)}}}