73 lines
1.5 KiB
CSS
73 lines
1.5 KiB
CSS
.narrative-card {
|
|
@apply p-12 py-24 mx-auto max-w-screen-lg;
|
|
|
|
> * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
&:after {
|
|
content: '';
|
|
background-image: url('../resources/img/skew-background.svg');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
@apply absolute inset-0;
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.narrative-card__cover {
|
|
@apply rotate-3;
|
|
}
|
|
|
|
&--even,
|
|
&:nth-of-type(even) {
|
|
&:after {
|
|
transform: scaleX(1);
|
|
}
|
|
.narrative-card__cover {
|
|
@apply rotate-[-3deg];
|
|
}
|
|
}
|
|
|
|
&--has-cover {
|
|
@apply grid lg:grid-cols-2 gap-12 lg:gap-24 gap-y-8 items-center;
|
|
grid-template-columns: 1fr;
|
|
@screen lg {
|
|
grid-template-columns: 3.5fr 1fr;
|
|
}
|
|
|
|
&--left {
|
|
grid-template-columns: 1fr 3.5fr;
|
|
}
|
|
}
|
|
|
|
&__cover {
|
|
--margin: 1rem;
|
|
@apply flex justify-center items-center w-full h-auto object-cover border border-primary mx-auto;
|
|
aspect-ratio: 1/1;
|
|
|
|
img {
|
|
@apply w-full h-full object-cover;
|
|
width: calc(100% - var(--margin));
|
|
height: calc(100% - var(--margin));
|
|
object-position: center;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
p {
|
|
@apply text-primary text-lg;
|
|
}
|
|
}
|
|
.narrative-card__content h1,
|
|
.narrative-card__content h2,
|
|
.narrative-card__content h3,
|
|
.narrative-card__content h4,
|
|
.narrative-card__content h5,
|
|
.narrative-card__content h6 {
|
|
@apply !text-primary uppercase;
|
|
|
|
font-size: 2.25rem;
|
|
}
|
|
}
|