82e0e24917
Plug in callouts content Most styles for the callout blade Re-export Consul Stack image Update icons Misc content tweaks Optimize mobile for the consul stack icon Better alignment Make full CTA box clickable
118 lines
1.9 KiB
CSS
118 lines
1.9 KiB
CSS
.calloutBlade {
|
|
padding-top: 56px;
|
|
padding-bottom: 56px;
|
|
|
|
& .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;
|
|
& .linkWrap {
|
|
padding: 64px 64px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
& .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;
|
|
& .linkWrap {
|
|
padding: 64px 32px;
|
|
}
|
|
|
|
@media (max-width: 1220px) {
|
|
grid-template-columns: 1fr;
|
|
& .linkWrap {
|
|
padding: 48px 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .linkWrap {
|
|
color: inherit;
|
|
height: 100%;
|
|
background: var(--gray-6);
|
|
&:hover {
|
|
background: var(--gray-5);
|
|
}
|
|
|
|
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;
|
|
}
|