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 {
@apply px-12;
}
.swiper-wrapper {
@apply mb-0;
}
&__inner {
@apply max-w-screen-2xl mx-auto;
}
@ -25,11 +27,11 @@
}
&__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 {
@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 {
grid-template-columns: 61.8fr 38.2fr;
}
@ -41,8 +43,10 @@
}
&__content {
@apply mx-0;
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 {
@apply text-2xl font-bold uppercase pb-8;
@ -54,10 +58,10 @@
.card-background {
@apply absolute border-primary border bg-white top-20 left-8;
height: 94%;
width: 104%;
height: 300px;
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;
&::before {
@ -66,18 +70,22 @@
height: calc(100% - 42px);
left: 21px;
top: 21px;
z-index: 0;
}
}
}
&__issue-thumbnail,
.card-background {
height: 300px;
}
&__issue-thumbnail {
@apply bg-white border-primary border relative;
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
height: 330px;
position: relative;
z-index: 10;
height: 300px;
img {
width: calc(100% - 42px);