RESPONSIVE Fix and optimization

This commit is contained in:
Antoine M 2025-09-16 14:07:01 +02:00
parent 59a829616a
commit d6c012a7c8

View File

@ -7,7 +7,9 @@
.swiper-pagination { .swiper-pagination {
@apply px-12; @apply px-12;
} }
.swiper-wrapper {
@apply mb-0;
}
&__inner { &__inner {
@apply max-w-screen-2xl mx-auto; @apply max-w-screen-2xl mx-auto;
} }
@ -25,11 +27,11 @@
} }
&__slider-content { &__slider-content {
@apply py-16 pt-8 md:pt-16 lg:pt-32; @apply py-16 pt-8 md:pt-16 2xl:pt-32;
} }
.card-revue { .card-revue {
@apply flex flex-col lg:grid lg:grid-cols-2 gap-y-2 md:gap-y-12 2xl:gap-y-16 pb-12 gap-x-12 2xl:gap-x-24 lg:px-12 px-4; @apply flex flex-col lg:grid lg:grid-cols-2 gap-y-2 md:gap-y-6 2xl:gap-y-16 pb-1 2xl:pb-12 gap-x-12 2xl:gap-x-24 lg:px-12 px-4;
@screen lg { @screen lg {
grid-template-columns: 61.8fr 38.2fr; grid-template-columns: 61.8fr 38.2fr;
} }
@ -41,8 +43,10 @@
} }
&__content { &__content {
@apply mx-0;
h4.title { h4.title {
@apply uppercase text-3xl md:text-6xl lg:text-4xl font-normal pb-8; @apply uppercase text-3xl md:text-6xl lg:text-6xl font-normal pb-8;
line-height: 1.02;
} }
h5.edito-title { h5.edito-title {
@apply text-2xl font-bold uppercase pb-8; @apply text-2xl font-bold uppercase pb-8;
@ -54,10 +58,10 @@
.card-background { .card-background {
@apply absolute border-primary border bg-white top-20 left-8; @apply absolute border-primary border bg-white top-20 left-8;
height: 94%;
width: 104%; width: 104%;
height: 300px;
transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg) transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg)
rotateX(1deg) scale(0.98) translateY(-2px); rotateX(1deg) scale(0.98) translateY(-40px);
z-index: 0; z-index: 0;
&::before { &::before {
@ -66,18 +70,22 @@
height: calc(100% - 42px); height: calc(100% - 42px);
left: 21px; left: 21px;
top: 21px; top: 21px;
z-index: 0; z-index: 0;
} }
} }
} }
&__issue-thumbnail,
.card-background {
height: 300px;
}
&__issue-thumbnail { &__issue-thumbnail {
@apply bg-white border-primary border relative; @apply bg-white border-primary border relative;
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */ /* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
height: 330px;
position: relative; position: relative;
z-index: 10; z-index: 10;
height: 300px;
img { img {
width: calc(100% - 42px); width: calc(100% - 42px);