53 lines
1.0 KiB
CSS
53 lines
1.0 KiB
CSS
.article-card {
|
|
@apply bg-white border border-primary p-6 relative !flex flex-col;
|
|
|
|
&:after {
|
|
@apply content-[''] absolute inset-0 border-primary w-full h-full pointer-events-none;
|
|
border-width: 4px;
|
|
opacity: 0;
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
opacity: 1;
|
|
}
|
|
.article-card__link-button {
|
|
svg {
|
|
@apply translate-x-2;
|
|
}
|
|
}
|
|
}
|
|
&__link-button {
|
|
@apply block mt-8;
|
|
width: 100px;
|
|
height: 100px;
|
|
svg {
|
|
transition: transform 0.3s ease-in-out;
|
|
|
|
path,
|
|
circle {
|
|
@apply stroke-primary;
|
|
}
|
|
}
|
|
}
|
|
.content-meta {
|
|
@apply text-primary;
|
|
}
|
|
&__title {
|
|
@apply text-2xl font-medium uppercase pb-4;
|
|
}
|
|
&__tags {
|
|
@apply flex flex-wrap gap-4 pt-4;
|
|
}
|
|
&__cover {
|
|
@apply w-48 h-48 absolute border-primary border bottom-12 right-12 hidden lg:block;
|
|
transform: rotate(-3deg);
|
|
|
|
img {
|
|
@apply w-full h-full object-cover;
|
|
}
|
|
}
|
|
.cta--go {
|
|
@apply text-primary mt-auto;
|
|
}
|
|
}
|