86 lines
1.9 KiB
CSS
86 lines
1.9 KiB
CSS
.wp-block-dynamiques-blocks-nos-recommandations {
|
|
@apply bg-carhop-purple-100 py-24 px-12 xl:px-24;
|
|
.inner {
|
|
@apply max-w-screen-2xl mx-auto;
|
|
}
|
|
|
|
.block-heading {
|
|
@apply text-primary flex flex-wrap gap-x-8;
|
|
|
|
&__title {
|
|
@apply flex grow items-end justify-between gap-8 uppercase text-2xl md:text-4xl lg:text-5xl;
|
|
span {
|
|
@apply block shrink-0;
|
|
}
|
|
&:after {
|
|
@apply w-full z-20 bg-primary block mb-2 shrink;
|
|
height: 1px;
|
|
content: ' ';
|
|
}
|
|
}
|
|
|
|
&__subtitle {
|
|
@apply text-lg font-bold uppercase nunito mb-6 w-full flex-wrap;
|
|
}
|
|
|
|
.header-link {
|
|
@apply text-lg font-medium nunito flex items-center gap-3;
|
|
text-transform: none;
|
|
span {
|
|
@apply pt-1;
|
|
}
|
|
|
|
svg {
|
|
@apply w-8 h-8;
|
|
transition: transform 0.3s ease-in-out;
|
|
path,
|
|
circle {
|
|
@apply stroke-primary stroke-2;
|
|
}
|
|
}
|
|
&:hover {
|
|
svg {
|
|
@apply rotate-45 translate-x-2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.recommandations-grid {
|
|
@apply grid lg:grid-cols-3 gap-16 pt-12;
|
|
}
|
|
|
|
.revue-recommandation-card {
|
|
@apply flex flex-col gap-x-8 gap-y-2 bg-white p-8 border border-primary h-fit;
|
|
.content-meta {
|
|
@apply text-primary;
|
|
}
|
|
&__title {
|
|
@apply text-2xl;
|
|
}
|
|
&__thumbnail {
|
|
@apply p-4 border border-primary mt-8;
|
|
transform: rotate(2deg);
|
|
|
|
img {
|
|
transition: filter 0.3s ease-out;
|
|
filter: grayscale(100%);
|
|
@apply w-full h-48 object-cover;
|
|
}
|
|
&:hover img {
|
|
filter: grayscale(0%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.revue-recommandation-card:nth-child(1) {
|
|
@apply mt-auto;
|
|
}
|
|
.revue-recommandation-card:nth-child(2) {
|
|
@apply my-auto;
|
|
}
|
|
.revue-recommandation-card:nth-child(3) {
|
|
@apply mb-auto;
|
|
}
|
|
}
|