refactoring the block with an inner container

This commit is contained in:
Antoine M 2023-11-17 17:04:57 +01:00
parent 1ea15b7fdc
commit c58113bd4f

View File

@ -1,10 +1,29 @@
.homegrade-blocks-timeline { .homegrade-blocks-timeline {
@apply max-w-screen-xl mx-auto relative my-32; @apply max-w-screen-xl mx-auto my-32;
&__lateral-cover { .section_titling {
@apply max-h-96 h-auto mx-auto; @apply mb-9;
} }
&__container {
@apply relative;
}
&__lateral-cover {
img {
@apply rounded-3xl mb-3;
}
.description,
.caption {
@apply m-0 p-0;
}
.caption {
@apply font-semibold text-primary text-sm;
}
}
&--has-lateral-cover { &--has-lateral-cover {
.homegrade-blocks-timeline__container {
@apply grid grid-cols-3 gap-12; @apply grid grid-cols-3 gap-12;
}
.homegrade-blocks-timeline__innercontent { .homegrade-blocks-timeline__innercontent {
@apply col-span-2; @apply col-span-2;
} }
@ -13,6 +32,7 @@
} }
} }
&--has-step-icons { &--has-step-icons {
.homegrade-blocks-timeline__container {
&:before { &:before {
@apply rounded-xl bg-secondary @apply rounded-xl bg-secondary
opacity-10 opacity-10
@ -26,6 +46,7 @@
width: 26px; width: 26px;
} }
} }
}
&--has-no-step-pictures { &--has-no-step-pictures {
} }
@ -49,8 +70,9 @@
@apply w-24 h-24 shrink-0 bg-white shadowed p-4 rounded-3xl flex justify-center items-center; @apply w-24 h-24 shrink-0 bg-white shadowed p-4 rounded-3xl flex justify-center items-center;
img { img {
@apply mx-auto object-contain w-12 h-10; @apply mx-auto object-contain;
max-height: 3rem; max-width: 80%;
max-height: 80%;
} }
} }
&__content { &__content {