open-consul/website/components/callout-blade/CalloutBlade.module.css

132 lines
2.3 KiB
CSS
Raw Normal View History

.calloutBlade {
padding-top: 56px;
padding-bottom: 56px;
--shadow-level-3: 0 16px 28px rgba(37, 38, 45, 0.12);
& .contentWrapper {
& > h3 {
margin-top: 0;
margin-bottom: 48px;
@media (max-width: 1000px) {
margin-bottom: 28px;
}
}
}
}
.contentWrapper {
composes: g-grid-container from global;
}
.callouts {
display: grid;
list-style: none;
margin: 0;
padding: 0;
&.twoUp {
grid-template-columns: 1fr 1fr;
grid-gap: 32px;
& .linkWrap {
padding: 64px 32px;
display: flex;
flex-direction: row;
background: var(--gray-6);
&:hover {
background: var(--gray-5);
box-shadow: var(--shadow-level-3);
}
& .icon {
margin-right: 48px;
}
@media (max-width: 1200px) {
padding: 48px 32px;
flex-direction: column;
& .icon {
margin-right: 0;
}
}
}
@media (max-width: 900px) {
grid-template-columns: 1fr;
}
}
&.threeUp {
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 32px;
& .linkWrap {
padding: 64px 32px;
border: 1px solid var(--gray-5);
border-radius: 2px;
&:hover {
background: var(--gray-6);
box-shadow: var(--shadow-level-3);
border-color: var(--gray-6);
}
}
@media (max-width: 1220px) {
grid-template-columns: 1fr;
& .linkWrap {
padding: 48px 32px;
}
}
}
& .linkWrap {
color: inherit;
height: 100%;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
& .icon {
margin-bottom: 16px;
& svg {
height: 50px;
}
}
& .flexWrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
& .infoWrapper {
display: flex;
flex-direction: column;
& > h5 {
margin-top: 0;
margin-bottom: 16px;
}
& > p {
color: var(--gray-3);
margin-top: 0;
margin-bottom: 48px;
}
}
& .linkWrapper {
& .eyebrow {
margin-bottom: 8px;
}
& :global(.g-btn) {
text-align: left;
}
}
}
}
}
.eyebrow {
composes: g-type-label from global;
}