.tips {
margin-top: 60px;
}
.tips-title {
margin-bottom: 24px;
text-align: center;
} .tips-list {
display: flex;
flex-direction: column;
gap: 24px;
} .tip-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
padding: 40px;
border-radius: var(--radius-card);
}
.tip-card.is-featured {
background: #f1f5f9;
}
.tip-card:not(.is-featured) {
background: #fff;
box-shadow: var(--shadow-card);
} .tip-content {
flex: 0 0 70%;
max-width: 70%;
} .tip-head {
margin-top: -30px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.tip-icon {
display: inline-block;
font-size: 20px;
line-height: 1;
transform: translateY(10px);
}
.tip-title {
font-size: 26px;
font-weight: 700;
margin: 0;
line-height: 1.2;
} .tip-text {
font-size: 15px;
color: var(--color-text-muted);
line-height: 1.6;
margin-bottom: 25px;
} .tip-highlight {
display: inline-flex;
align-items: center;
background: #fef3c7;
color: #92400e;
padding: 8px 14px;
border-radius: var(--radius-pill);
font-size: 13px;
max-width: fit-content;
}
.tip-highlight strong {
margin-right: 4px;
} .tip-cta {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.tip-cta .us-btn {
white-space: nowrap;
width: auto;
padding: 14px 22px;
} @media (max-width: 1024px) {
.tip-card {
flex-direction: column;
align-items: flex-start;
}
.tip-content {
max-width: 100%;
flex: 1;
} .tip-cta {
width: 100%;
display: flex;
justify-content: center;
} .tip-cta .us-btn {
width: 100%;
text-align: center;
white-space: normal;
}
}