<div class="c-card c-card--resp w-full max-w-card md:max-w-none relative">
<div class="c-card-clip c-card--resp__inner bg-white md:max-w-post md:mx-auto md:flex md:justify-center md:items-stretch">
<div class="md:w-6/12">
<img class="object-fit" src="https://images.unsplash.com/photo-1512933059723-2c1872655ce1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=400&fit=crop&s=b9128991d9f18cd22b8a3083363928cc" alt="">
</div>
<div class="p-8 md:w-6/12 flex flex-col">
<div class="mb-4 leading-none">
<a href="" class="o-tag uppercase text-xs text-black-50 border tracking-wide border-black-40 px-2 h-sm-tag inline-flex items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Destination</span></a>
</div>
<h4 class="text-lg leading-lg text-black-50 mb-4">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!
</h4>
<div class="mt-auto">
<a href="#0" class="o-btn o-btn--sm text-blush relative py-4 pr-3"><span class="block">Read more</span></a>
</div>
</div>
</div>
</div>
<div class="c-card c-card--resp w-full max-w-card md:max-w-none relative">
<div class="c-card-clip c-card--resp__inner bg-white md:max-w-post md:mx-auto md:flex md:justify-center md:items-stretch">
<div class="md:w-6/12">
<img class="object-fit" src="{{ image.url }}" alt="{{ image.alt }}">
</div>
<div class="p-8 md:w-6/12 flex flex-col">
<div class="mb-4 leading-none">
{% include '@tags--sm' with { text: tag.text, url: tag.url } %}
</div>
<h4 class="text-lg leading-lg text-black-50 mb-4">
{{ heading }}
</h4>
<div class="mt-auto">
{% include '@button' with { text: link.text, url: link.url } %}
</div>
</div>
</div>
</div>
{
"siteTitle": "Asta Valentaite",
"copyright": "© 2017 Asta Valentaite. All rights reserved.",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"objects": "/02-objects/",
"global": "../03-global/",
"components": "/04-components/",
"pages": "/05-pages/",
"macros": "/macros/",
"wrapper": "/wrapper/"
}
}
}
}
},
"sitemenu": [
{
"title": "About",
"slug": "/components/preview/about"
},
{
"title": "Fashion",
"slug": "/components/preview/press"
},
{
"title": "Beauty",
"slug": "/components/preview/post"
},
{
"title": "Lifestyle",
"slug": "/components/preview/vertical"
},
{
"title": "Collaborations",
"slug": "/components/preview/collaborations"
},
{
"title": "Press",
"slug": "/components/preview/press"
}
],
"tag": "Lifestyle",
"heading": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!",
"image": {
"url": "https://images.unsplash.com/photo-1512933059723-2c1872655ce1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=400&fit=crop&s=b9128991d9f18cd22b8a3083363928cc",
"alt": null
},
"link": {
"text": "Read more",
"url": "#0"
}
}
.c-card {
transition: box-shadow 300ms ease, clip-path 300ms ease;
&::after {
@apply .absolute .block .m-auto .pin;
box-shadow: 0 rem(40px) rem(50px) rgba(0, 0, 0, 0.05);
transition: box-shadow 300ms ease, transform 300ms ease;
z-index: -1;
transform-origin: 50%;
content: ' ';
@include mq($from: breakpoint('lg')) {
top: rem(10px);
bottom: rem(10px);
right: rem(10px);
left: rem(10px);
}
}
&:hover {
.c-card-clip {
clip-path: inset(0 0);
}
&::after {
@apply .shadow-card-on;
transform: scale(1);
}
}
}
.c-card--info {
width: rem(280px);
}
.c-card--info::after {
display: none;
}
.c-card-clip {
@include mq($from: breakpoint('lg')) {
transition: clip-path 300ms ease;
clip-path: inset(rem(10px) rem(10px));
}
}
.c-card--collab {
transition: box-shadow 300ms ease;
}
.c-card--info {
.o-icon {
@apply .absolute .pin-t;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
}
.c-card--collaboration {
.c-card__panel {
transform: translate3d(0, rem(60px), 0);
}
}
.c-card-list {
@include mq($from: breakpoint('md')) {
& > div {
&:nth-child(even) {
margin-right: 0;
}
}
}
@include mq($from: breakpoint('lg')) {
& > div {
&:nth-child(even) {
@apply .mr-su;
}
&:nth-child(3n) {
margin-right: 0;
}
}
}
}
// .c-carousel--latest {
// [data-carousel-item] {
// opacity: 0.5;
// transition: opacity 300ms ease;
// //pointer-events: none;
// &.is-selected {
// opacity: 1;
// // pointer-events: auto;
// }
// }
// }
.c-card--info {
&:hover {
.o-icon__bg {
transform: rotate(45deg) scale(1.15);
}
}
}
@include mq($from: breakpoint('lg')) {
.c-card--vertical {
img {
max-height: rem(250px);
}
}
}
.c-card--resp__inner {
min-height: rem(290px);
}
There are no notes for this item.