.block-revues-precedentes { @apply bg-carhop-blue-50 py-20; .block-revues-precedentes__header { } .swiper-actions-wrapper, .swiper-pagination-fraction, .swiper-pagination { @apply px-20; } .swiper-wrapper { @apply mb-16; } .swiper-actions-wrapper { @apply flex flex-col md:flex-row md:justify-between md:items-center gap-4 gap-y-8; #discover-all-revues { @apply internal-link-with-icon; @apply font-bold text-lg; } } &__inner { @apply max-w-screen-2xl mx-auto; } &__header { @apply flex flex-col justify-center items-center gap-4; .block-title { @apply text-lg mb-3 font-bold tracking-bigbig uppercase nunito; } .block-subtitle { @apply text-5xl font-normal uppercase; } } &__slider-content { @apply py-16 pt-8 md:pt-16 2xl:pt-32 pb-0; } .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-20 px-4; @screen lg { grid-template-columns: 65fr 35fr; } .content-meta { @apply col-span-2 w-full max-w-full mb-0 text-primary; .issue-number-group { @apply flex gap-2; } .label { @apply text-primary sr-only; } @apply flex items-center gap-2; .value { @apply bg-primary text-white p-3 font-medium uppercase; } } &__image { @apply w-full h-full object-cover; } &__content { @apply mx-0; h4.title { @apply uppercase text-3xl md:text-5xl lg:text-5xl 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-bigbig !mb-0 text-primary; } .card-revue__parution { @apply text-primary; } } } }