FeatureGrid.module.css•1.85 kB
.featureGrid {
display: grid;
overflow: hidden;
grid-auto-columns: 1fr;
grid-column-gap: 1px;
grid-row-gap: 1px;
grid-template-columns: repeat(var(--columns), 1fr);
grid-template-rows: auto auto;
border: 1px solid var(--oc-gray-2);
border-radius: 32px;
background-color: var(--oc-gray-2);
transition: all 200ms ease;
}
[data-theme='dark'] .featureGrid {
background: var(--oc-gray-8);
border-color: var(--oc-gray-9);
}
@media screen and (max-width: 996px) {
.featureGrid {
grid-template-columns: 1fr;
}
}
.featureCell {
display: flex;
padding: 2rem;
flex-direction: column;
align-items: flex-start;
background-color: var(--oc-gray-0);
transition: all 200ms ease;
}
[data-theme='dark'] .featureCell {
background: #000;
}
.featureIcon {
transition: all 200ms ease;
display: flex;
width: 3rem;
height: 3rem;
min-height: 3rem;
min-width: 3rem;
padding: 0.5rem;
justify-content: center;
align-items: center;
border-radius: 0.5rem;
background-color: var(--oc-indigo-1);
margin: 0 0 2rem 0;
}
[data-theme='dark'] .featureIcon {
transition: all 200ms ease;
background: var(--oc-gray-9);
}
.featureCell h3 {
margin: 0 0 0.5rem 0;
font-size: 1.375rem;
line-height: 1.2;
font-weight: 400;
}
.featureCell p {
transition: all 200ms ease;
font-size: 0.9375rem;
color: var(--oc-gray-7);
}
[data-theme='dark'] .featureCell p {
color: var(--oc-gray-4);
}
.featureCell strong {
color: var(--oc-grape-8);
font-weight: 400;
}
.actionButton {
display: flex;
margin-top: 0.25rem;
padding: 0.5rem 1rem;
background-color: var(--oc-indigo-1);
transition: all 200ms ease;
font-size: 1.125rem;
align-items: center;
border-radius: 16px;
text-align: center;
justify-content: center;
}
[data-theme='dark'] .actionButton {
background: var(--oc-gray-9);
}