.features-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--color-background);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
@media (max-width: 900px) {
grid-template-columns: 1fr;
}
}
.feature-item {
padding: 3rem 2rem;
text-align: left;
border-right: 1px solid rgba(0, 0, 0, 0.06);
transition: background var(--transition-normal);
position: relative;
&:last-child {
border-right: none;
}
&:hover {
background: rgba(166, 93, 87, 0.06);
}
h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text);
}
p {
font-size: 0.95rem;
color: var(--color-text-light);
line-height: 1.5;
}
@media (max-width: 900px) {
border-right: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding: 2rem 1.5rem;
&:last-child {
border-bottom: none;
}
}
}
.feature-number-wrapper {
position: absolute;
top: 1.5rem;
right: 1.5rem;
@media (max-width: 900px) {
top: 1rem;
right: 1rem;
}
}
.feature-number {
font-size: 4rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
opacity: 0.15;
@media (max-width: 900px) {
font-size: 3rem;
}
}