refining responsive

This commit is contained in:
Antoine M 2024-01-17 16:39:07 +01:00
parent 8592a43947
commit e6c16a0820

View File

@ -2,30 +2,29 @@
@apply max-w-screen-xl mx-auto pt-12 mb-12; @apply max-w-screen-xl mx-auto pt-12 mb-12;
&__row { &__row {
@apply grid lg:grid-cols-11 gap-8; @apply flex flex-col gap-y-4 gap-3 lg:gap-8 items-start md:items-center lg:grid grid-cols-11;
align-items: center;
} }
&__row + &__row { &__row + &__row {
@apply mt-8 border-t border-gray pt-8; @apply mt-8 border-t border-gray pt-8;
} }
&__cover { &__cover {
@apply w-20 rounded-lg col-span-1; @apply w-20 rounded-lg md:col-span-1;
} }
&__icon { &__icon {
@apply w-20 rounded-2xl col-span-1; @apply w-20 rounded-2xl md:col-span-1;
} }
&__title { &__title {
@apply col-span-4 font-bold; @apply md:col-span-4 font-bold;
line-height: 1.3;
} }
&__thematique { &__thematique {
@apply col-span-2 text-center w-fit; @apply col-span-5 md:col-span-2 text-center w-fit md:place-self-center;
place-self: center;
} }
&__edition { &__edition {
@apply col-span-2 text-center; @apply col-span-6 md:col-span-2 md:text-center;
} }
&__button { &__button {
@apply col-span-2 flex justify-end; @apply col-span-11 md:col-span-2 md:justify-end place-self-center mt-4 lg:mt-0;
} }
&__video-thumbnail { &__video-thumbnail {
@apply w-full h-auto rounded-lg col-span-2 object-cover; @apply w-full h-auto rounded-lg col-span-2 object-cover;