handling image aspect ratio

This commit is contained in:
Antoine M 2023-11-17 17:44:17 +01:00
parent fdbc81a10e
commit a247c3d500

View File

@ -10,7 +10,6 @@
img { img {
@apply rounded-3xl mb-3; @apply rounded-3xl mb-3;
} }
.description, .description,
.caption { .caption {
@apply m-0 p-0; @apply m-0 p-0;
@ -18,6 +17,21 @@
.caption { .caption {
@apply font-semibold text-primary text-sm; @apply font-semibold text-primary text-sm;
} }
&--squared {
img {
@apply h-auto
object-cover object-center;
aspect-ratio: 1/1;
}
}
&--md {
img {
@apply w-full
object-cover object-center;
max-height: 450px;
}
}
} }
&--has-lateral-cover { &--has-lateral-cover {
@ -34,7 +48,7 @@
&--has-step-icons { &--has-step-icons {
.homegrade-blocks-timeline__container { .homegrade-blocks-timeline__container {
&:before { &:before {
@apply rounded-xl bg-secondary @apply rounded-3xl bg-secondary
opacity-10 opacity-10
absolute absolute
top-0 top-0
@ -42,8 +56,8 @@
z-index: -1; z-index: -1;
content: ''; content: '';
top: 0; top: 0;
left: calc(33% + 56px); left: calc(33% + 54px);
width: 26px; width: 34px;
} }
} }
} }
@ -51,7 +65,10 @@
} }
.homegrade-blocks-timeline-step { .homegrade-blocks-timeline-step {
@apply grid grid-cols-3 gap-12 py-6; @apply grid grid-cols-3 gap-12 py-16;
&__innercontent {
@apply -mt-12;
}
&__cover { &__cover {
@apply max-w-md h-auto; @apply max-w-md h-auto;
border-radius: 22px; border-radius: 22px;