diff --git a/resources/css/blocks/revues-precedentes.css b/resources/css/blocks/revues-precedentes.css index 7ebd0c1..bae11e8 100644 --- a/resources/css/blocks/revues-precedentes.css +++ b/resources/css/blocks/revues-precedentes.css @@ -3,7 +3,7 @@ .block-revues-precedentes__header { } &__inner { - @apply max-w-screen-2xl mx-auto px-12 xl:px-24; + @apply max-w-screen-2xl mx-auto; } &__header { @@ -23,8 +23,7 @@ } .card-revue { - @apply grid gap-12 2xl:gap-24 pb-24; - + @apply grid gap-y-12 2xl:gap-y-16 pb-24 gap-x-12 2xl:gap-x-24; grid-template-columns: 61.8fr 38.2fr; .content-meta { @@ -35,7 +34,53 @@ } &__content { - @apply p-6; + h4.title { + @apply uppercase text-7xl font-normal pb-8; + } + 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; + height: 94%; + width: 104%; + transform: perspective(800px) rotateY(10deg) + skewX(1deg) rotateZ(4deg) rotateX(1deg) + scale(0.98) translateY(-2px); + 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 { + @apply bg-white border-primary border relative; + /* transform: perspective(800px) rotateY(10deg) skewX(2deg); */ + height: 330px; + position: relative; + z-index: 10; + + img { + width: calc(100% - 42px); + height: calc(100% - 42px); + left: 21px; + top: 21px; + object-fit: cover; + position: relative; + z-index: 2; + } } } }