76 lines
1.6 KiB
CSS
76 lines
1.6 KiB
CSS
.homegrade-blocks-timeline {
|
|
@apply max-w-screen-xl mx-auto relative my-32;
|
|
&__lateral-cover {
|
|
@apply max-h-96 h-auto mx-auto;
|
|
}
|
|
&--has-lateral-cover {
|
|
@apply grid grid-cols-3 gap-12;
|
|
.homegrade-blocks-timeline__innercontent {
|
|
@apply col-span-2;
|
|
}
|
|
.homegrade-blocks-timeline-step {
|
|
@apply !block;
|
|
}
|
|
}
|
|
&--has-step-icons {
|
|
&:before {
|
|
@apply rounded-xl bg-secondary
|
|
opacity-10
|
|
absolute
|
|
top-0
|
|
h-full;
|
|
z-index: -1;
|
|
content: '';
|
|
top: 0;
|
|
left: calc(33% + 56px);
|
|
width: 26px;
|
|
}
|
|
}
|
|
&--has-no-step-pictures {
|
|
}
|
|
|
|
.homegrade-blocks-timeline-step {
|
|
@apply grid grid-cols-3 gap-12 py-6;
|
|
&__cover {
|
|
@apply max-w-md h-auto;
|
|
border-radius: 22px;
|
|
img {
|
|
@apply rounded-3xl mb-3;
|
|
}
|
|
.description,
|
|
.caption {
|
|
@apply m-0 p-0;
|
|
}
|
|
.caption {
|
|
@apply font-semibold text-primary text-sm;
|
|
}
|
|
}
|
|
&__icon {
|
|
@apply w-24 h-24 shrink-0 bg-white shadowed p-4 rounded-3xl flex justify-center items-center;
|
|
|
|
img {
|
|
@apply mx-auto object-contain w-12 h-10;
|
|
max-height: 3rem;
|
|
}
|
|
}
|
|
&__content {
|
|
@apply col-span-2 flex gap-8;
|
|
&--has-step-icon {
|
|
&:before {
|
|
content: '';
|
|
height: 100%;
|
|
width: 2px;
|
|
background: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
@apply text-secondary font-bold text-xl m-0;
|
|
}
|
|
&__subtitle {
|
|
@apply text-neutral-900 font-bold text-2xl;
|
|
}
|
|
}
|
|
}
|