45 lines
903 B
CSS
45 lines
903 B
CSS
.narrative-card {
|
|
@apply bg-white border border-primary p-12 mx-auto max-w-screen-lg;
|
|
|
|
&--has-cover {
|
|
@apply grid grid-cols-2 gap-32 items-center;
|
|
grid-template-columns: 4fr 1fr;
|
|
|
|
&--left {
|
|
grid-template-columns: 1fr 4fr;
|
|
}
|
|
}
|
|
|
|
&__cover {
|
|
@apply w-full h-auto object-cover border border-primary mx-auto;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
&:nth-child(odd) {
|
|
.narrative-card__cover {
|
|
@apply rotate-3;
|
|
}
|
|
}
|
|
&:nth-child(even) {
|
|
.narrative-card__cover {
|
|
@apply rotate-[-3deg];
|
|
}
|
|
}
|
|
|
|
&__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.5rem;
|
|
}
|
|
}
|