118 lines
2.7 KiB
CSS
118 lines
2.7 KiB
CSS
.block-revues-precedentes {
|
|
@apply bg-carhop-blue-50 py-32;
|
|
.block-revues-precedentes__header {
|
|
}
|
|
.swiper-controls,
|
|
.swiper-pagination-fraction,
|
|
.swiper-pagination {
|
|
@apply px-12;
|
|
}
|
|
.swiper-wrapper {
|
|
@apply mb-0;
|
|
}
|
|
&__inner {
|
|
@apply max-w-screen-2xl mx-auto;
|
|
}
|
|
|
|
&__header {
|
|
@apply flex flex-col justify-center items-center gap-4;
|
|
|
|
.block-title {
|
|
@apply text-base mb-6 font-bold tracking-wider uppercase nunito;
|
|
}
|
|
|
|
.block-subtitle {
|
|
@apply text-5xl font-normal uppercase;
|
|
}
|
|
}
|
|
|
|
&__slider-content {
|
|
@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-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;
|
|
}
|
|
.content-meta {
|
|
@apply col-span-2 w-full max-w-full mb-0;
|
|
}
|
|
&__image {
|
|
@apply w-full h-full object-cover;
|
|
}
|
|
|
|
&__content {
|
|
@apply mx-0;
|
|
h4.title {
|
|
@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;
|
|
}
|
|
}
|
|
|
|
&__issue-thumbnail-wrapper {
|
|
@apply relative w-full;
|
|
|
|
.card-background {
|
|
@apply absolute border-primary border bg-white top-20 left-8;
|
|
width: 104%;
|
|
height: 300px;
|
|
transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg)
|
|
rotateX(1deg) scale(0.98) translateY(-40px);
|
|
z-index: 0;
|
|
|
|
&::before {
|
|
@apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
|
|
width: calc(100% - 42px);
|
|
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); */
|
|
position: relative;
|
|
z-index: 10;
|
|
height: 300px;
|
|
|
|
img {
|
|
width: calc(100% - 42px);
|
|
height: calc(100% - 42px);
|
|
left: 21px;
|
|
top: 21px;
|
|
object-fit: cover;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
&__post-details {
|
|
@apply md:flex gap-8 pt-12;
|
|
|
|
.label {
|
|
@apply uppercase font-bold tracking-widest !mb-0;
|
|
}
|
|
|
|
.card-revue__issue-number {
|
|
@apply flex items-center gap-2;
|
|
|
|
&__value {
|
|
@apply bg-primary text-white p-4 font-bold uppercase;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|