<div class="overflow-hidden relative" data-theme="float-header" data-behaviour="StarFader ScrollMotion ScrollReveal ScrollTo">
<svg data-star-item class="w-full block absolute pin-t pin-l md:w-8/12 z-10 pointer-events-none opacity-0" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1490.13 1095.21">
<path fill="#fff" d="M1334.17 1094.07c-12.07-6.13-25.85-19.44-35-41.42l-116.75-298.54c-8.82-31.11-1.44-55.37 20-76.32l287.68-283.9h-401.8c-36.81 0-49.3-25.77-65.37-64.13L896.89 1 0 0v1095.21z" />
</svg>
<header class="c-header flex items-center z-50 absolute pin-l pin-r pin-t " data-bg-item data-behaviour="Header">
<div class="wrapper w-full flex justify-between items-center">
<a href="/" class="c-header__logo leading-none inline-flex items-center justify-center text-white z-20 lg:text-blush">
<span class="u-vh">Asta Valentaite</span>
<svg id="logo-svg" viewBox="0 0 200 27.95" preserveAspectRatio midXmidY class="fill-current c-header__logo overflow-visible">
<title>Asta Valentaite</title>
<path class="logo-part" id="a1" d="M25.24 22.51L16.36 0h-1.6L6.68 21.29a11.77 11.77 0 0 1-2.6 4.28A7.41 7.41 0 0 1 0 28h10.39s-4.09-.48-4.09-4a6.58 6.58 0 0 1 .33-1.83l5.73-15 5.52 14.47a10.74 10.74 0 0 1 1 3.56c0 1.67-1.07 2.63-3.08 2.76h14.57c-2.06-.31-3.71-2.02-5.13-5.45z" />
<path class="logo-part" id="s1" d="M74.9 11.07c-3.75-2-6.48-3.3-6.48-6.47A4.47 4.47 0 0 1 70 1.12a5.58 5.58 0 0 1 4.52-.61 7.29 7.29 0 0 1 4 2.38 6.3 6.3 0 0 1 1 1.61.21.21 0 0 0 .19.13.21.21 0 0 0 .21-.21.22.22 0 0 0 0-.06 6.7 6.7 0 0 0-3-3.32C73-1 67 .19 64.44 3.77a6.85 6.85 0 0 0-1.23 4c0 4.29 3.53 6.64 7.1 8.59 4 2.13 6.35 3.51 6.35 6.33a4.73 4.73 0 0 1-3.14 4.68A9.46 9.46 0 0 1 67 26.22a7 7 0 0 1-2-1.81 8.63 8.63 0 0 1-1.56-4.68.23.23 0 1 0-.46 0 9.1 9.1 0 0 0 1.65 4.94c2.7 3.65 7.94 3.93 11.91 2.44A7.84 7.84 0 0 0 82 19.66c0-4.73-3.49-6.55-7.1-8.59z" />
<path class="logo-part" id="t1" d="M130.83 0h-15.1v5.26l.41-.55c.43-.59 2.85-3.79 5-4.23h.24c1.06-.11 2.16-.11 3.22-.12h1.55V24.41a4.7 4.7 0 0 1-.63 2.86l-.4.66h6.77l-.4-.66a4.7 4.7 0 0 1-.64-2.86V.3h1.55c1.06 0 2.16 0 3.22.12 2.69.29 4.14 2.87 5.61 4.82V0z" />
<path class="logo-part" id="logo-a2" d="M194.87 22.51L186 0h-1.61l-8.08 21.29a11.63 11.63 0 0 1-2.6 4.28 7.41 7.41 0 0 1-4.08 2.43H180s-4.1-.43-4.1-3.92a6.24 6.24 0 0 1 .34-1.83l5.72-15 5.52 14.47a10.74 10.74 0 0 1 1 3.56c0 1.67-1.07 2.63-3.08 2.76H200c-2-.39-3.7-2.1-5.13-5.53z" />
</svg>
</a>
<a id="nav-btn" href="#site-menu" data-menu-opener class="o-burger block absolute z-20 c-nav__btn lg:hidden">
<span class="u-vh">Open Menu</span>
<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--mid absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
</a>
<nav data-behaviour="MobileMenu" id="site-menu" class="invisible lg:visible z-10 c-nav fixed lg:relative pin-t pin-l w-full lg:w-auto h-screen lg:h-auto" role="navigation" aria-label="Main menu">
<div id="site-menu-inner" class="w-full p-6 pb-12 flex flex-col items-center bg-black lg:flex-row lg:bg-transparent lg:p-0 lg:justify-end">
<div class="c-nav__logo opacity-0 lg:hidden">
<i class="icon icon--ui-logo-a">
<svg>
<use class="no-barba" xlink:href="#ui-logo-a"></use>
</svg>
</i>
</div>
<ul class="c-nav__list list-reset lg:flex relative mt-8 pt-8 mb-6 text-body lg:m-0 lg:p-0">
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/about">About</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/press">Fashion</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/post">Beauty</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/vertical">Lifestyle</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/collaborations">Collaborations</a>
</li>
<li data-transition-item role="menuitem" class="c-nav__item text-center mb-4 lg:mb-0 lg:mx-2 xl:mx-4">
<a data-text-item class="c-nav__item block leading-none text-white font-regular lg:text-body lg:text-black-50 no-underline lg:py-1 lg:relative" href="/components/preview/press">Press</a>
</li>
</ul>
<div class="hidden lg:flex items-center lg:ml-4">
<a data-text-item data-transition-item href="" class="block text-white mr-2 c-nav__social lg:text-black-50">
<span class="u-vh">Visit Asta Valentaite on Instagram</span>
<i class="icon icon--ui-instagram">
<svg>
<use class="no-barba" xlink:href="#ui-instagram"></use>
</svg>
</i>
</a>
<a data-text-item data-transition-item href="" class="block text-white ml-2 c-nav__social lg:text-black-50">
<span class="u-vh">Visit Asta Valentaite on Twitter</span>
<i class="icon icon--ui-twitter">
<svg>
<use class="no-barba" xlink:href="#ui-twitter"></use>
</svg>
</i>
</a>
</div>
</div>
</nav>
</div>
</header>
<main id="barba-wrapper" class="w-full relative z-20">
<div class="barba-container" data-page-theme="float-header">
<div class="relative z-1">
<div id="hero" class="c-hero c-hero--tags pt-8 lg:pt-15 lg:pb-15 bg-blush" data-behaviour="ShowTags">
<div class="wrapper relative z-10">
<div class="flex flex-col items-center justify-center w-10/12 m-auto py-16 lg:py-18">
<h1 class="text-xl lg:text-2xl leading-2xl text-white text-center font-thin -mt-4 mb-4" data-animate>
Lifestyle
</h1>
<button data-target="#tags" data-animate data-accordion-btn class="text-white text-sm font-light uppercase mb-3 opacity-50 tracking-wide">Filter by</button>
<div id="tags" class="hidden lg:block">
<ul class="list-reset flex flex-wrap justify-center items-center max-w-lg mx-auto">
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Lifestyle</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Destinations</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Culture</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Food</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Fitness</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Wellbeing</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Asta Recommends</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Gifts</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Other</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Other</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Other</span></a>
</li>
<li class="mx-2 mb-2 opacity-80" data-animate>
<a href="#0" class="o-tag font-regular uppercase text-white text-sm border border-white px-4 h-tag inline-flex tracking-wide items-center hover:text-blush hover:bg-white"><span class="leading-none o-tag--text-adjust">Other</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white">
<div class="pb-4 wrapper">
<div class="-mt-15 lg:-mt-20 relative z-10">
<div class="c-card w-full relative">
<div class="c-card-clip md:mx-auto md:flex md:items-stretch bg-white">
<div class="md:w-su-ng-8/12 md:pr-2 bg-white">
<img class="object-fit lazyload" data-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-su-ng-4/12 md:flex flex-col justify-end items-start">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</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>
<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>
<div class="pt-16 mb-12 lg:pt-xl">
<div class="bgi-gradient-5 relative" data-behaviour="StickyBg" data-sticky-bg>
<div class="overflow-hidden">
<svg id="sticky-bg" class="absolute pin-t w-full home-grid-sploosh pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2354.04 1969.31"><defs><linearGradient id="linear-gradient" x1="1177.02" y1="1541.31" x2="1177.02" y2="-428" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e6e6e6" stop-opacity="0"/><stop offset="1" stop-opacity=".1"/></linearGradient></defs><g style="isolation:isolate"><path d="M0 .25l893 818.21c61.38 59.92 82.49 129.27 57.29 218.23L626.5 1850.52c-26.21 62.85-55.6 101.28-90.13 118.79H2354V0z" opacity=".75" fill="url(#linear-gradient)" style="mix-blend-mode:multiply" id="Layer_1" data-name="Layer 1"/></g></svg>
</div>
<div class="-mt-16 lg:-mt-xl wrapper flex flex-col md:flex-row md:items-stretch items-center md:flex-row md:flex-wrap md:justify-center lg:mb-15">
<div class="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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>
<div class="wrapper mb-17 pt-2">
<form action="" class="c-subscribe c-subscribe--base shadow-card hover:shadow-card-on bg-white p-8 flex flex-col justify-center md:flex-row items-center relative m-auto w-full max-w-subscribe md:justify-between">
<div class="o-icon flex items-center justify-center relative">
<div class="o-icon__bg absolute pin bg-blush"></div>
<i class="icon icon--ui-message">
<svg>
<use class="no-barba" xlink:href="#ui-message"></use>
</svg>
</i>
</div>
<div class="mb-4 md:m0 md:pr-8 md:mb-0 text-center md:text-left">
<p class="text-body">Subscribe to the newsletter for updates and exclusive stories.</p>
</div>
<div class="relative">
<label class="hidden" for="subscribeEmail">
Email address
</label>
<input class="appearance-none border border-black-20 text-body w-full h-input md:w-input pb-2 pt-3 pl-4 pr-12 text-black-20" id="subscribeEmail" type="email" placeholder="Email address">
<button type="submit" class="appearance-none absolute pin-t pt-1 pin-b pin-r pr-4 uppercase text-sm">Submit</button>
</div>
</form>
</div>
<div class="wrapper flex flex-col md:flex-row md:items-stretch items-center md:flex-row md:flex-wrap md:justify-center lg:mb-16">
<div class="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
<div class="c-card c-card--vert w-full max-w-card md:max-w-none relative">
<div class="c-card-clip">
<img class="object-fit lazyload" data-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 class="p-8 bg-white">
<div class="mb-4 leading-none">
<a href="#0" 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">Lifestyle</span></a>
</div>
<h4 class="text-body leading-lg text-black-50 mb-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, ut!</h4>
<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>
</div>
</div>
</div>
<div class="wrapper">
<div class="flex flex-col items-center max-w-card md:max-w-none md:w-su-6/12 lg:w-su-4/12 mx-auto c-press__pager">
<a href="#0" class="o-btn o-btn--fill bg-white text-black-50 uppercase justify-center w-full py-7 px-14 hover:shadow-fill">Load more</a> </div>
</div>
</div>
</main>
<footer class="c-footer bg-black-5 pt-18 pb-12 md:pt-21 relative z-10">
<div class="mb-8">
<div class="o-line block w-px mx-auto bg-black-5"></div>
</div>
<div class="md:mb-4">
<form action="" class="c-subscribe pt-12 pb-8 px-8 relative m-auto flex flex-col items-center">
<div class="mb-4 lg:mb-8 c-subscribe__logo">
<i class="icon icon--ui-logo-a">
<svg>
<use class="no-barba" xlink:href="#ui-logo-a"></use>
</svg>
</i>
</div>
<div class="mb-4">
<p class="text-body text-center lg:text-lg">Sign up to the newsletter</p>
</div>
<div class="relative c-subscribe--sm w-full mx-auto">
<label class="hidden" for="subscribeEmail">
Email address
</label>
<input class="appearance-none bg-white text-body w-full h-input pt-3 pb-2 pl-4 pr-12 text-black-20" id="subscribeEmail" type="email" placeholder="Email address">
<button type="submit" class="appearance-none absolute pt-1 pin-t pin-b pin-r pr-4 uppercase text-sm">Submit</button>
</div>
</form>
</div>
<ul class="hidden list-reset md:flex md:justify-center text-body mb-2">
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/about">About</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/press">Fashion</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/post">Beauty</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/vertical">Lifestyle</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/collaborations">Collaborations</a>
</li>
<li class="text-center text-white md:mx-2">
<a class="block text-black-50 no-underline text-sm leading-sm" href="/components/preview/press">Press</a>
</li>
</ul>
<p class="text-sm text-black-50 text-center">© 2017 Asta Valentaite. All rights reserved.</p>
</footer>
</div>
<div class="c-modal">
<div class="c-modal__inner">
<div class="c-modal__content" id="modal-content"></div>
<button class="c-modal__closer">
<div class="o-icon flex items-center justify-center relative" data-modal-close>
<div class="o-icon__bg absolute pin bg-white"></div>
<i class="icon icon--ui-close">
<svg>
<use class="no-barba" xlink:href="#ui-close"></use>
</svg>
</i>
</div>
</button>
</div>
</div>
<div id="output" class="c-lightbox"></div>
{% import '@helpers' as h %}
{% extends craft.app.config.general.custom.wrapper ~ '_layout.twig' %}
{% block critical_css %}
<!-- build:critical-->
<!-- endbuild -->
{% endblock %}
{% block pageTheme %}float-header{% endblock %}
{% block content %}
<div class="barba-container" data-page-theme="float-header">
<div class="relative z-1">
{% include '@hero--tags' with {
heading: hero.heading,
tags: hero.tags
} %}
</div>
{% if cards|length %}
<div class="bg-white">
<div class="pb-4 wrapper">
<div class="-mt-15 lg:-mt-20 relative z-10">
{% include '@card--large' with cards[0] %}
</div>
</div>
<div class="pt-16 mb-12 lg:pt-xl">
<div class="bgi-gradient-5 relative" data-behaviour="StickyBg" data-sticky-bg>
<div class="overflow-hidden">
{{ h.sploosh() }}
</div>
<div class="-mt-16 lg:-mt-xl wrapper flex flex-col md:flex-row md:items-stretch items-center md:flex-row md:flex-wrap md:justify-center lg:mb-15">
{% for card in cards|slice(1, 3) %}
<div class="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
{% include '@card--vertical' with card %}
</div>
{% endfor %}
</div>
<div class="wrapper mb-17 pt-2">
{% include '@subscribe' %}
</div>
<div class="wrapper flex flex-col md:flex-row md:items-stretch items-center md:flex-row md:flex-wrap md:justify-center lg:mb-16">
{% for card in cards|slice(4) %}
<div class="mb-4 md:w-su-6/12 lg:w-su-4/12 md:mr-su c-vertical__item" data-motion='fade'>
{% include '@card--vertical' with card %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
{% if nextUrl|length %}
<div class="wrapper">
<div class="flex flex-col items-center max-w-card md:max-w-none md:w-su-6/12 lg:w-su-4/12 mx-auto c-press__pager">
{% include '@button--fill' with { text: 'Load more', href: nextUrl } %}
</div>
</div>
{% endif %}
</div>
{% endblock %}
{
"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"
}
],
"nextUrl": "#0",
"hero": {
"heading": "Lifestyle",
"tags": [
{
"text": "Lifestyle",
"url": "#0"
},
{
"text": "Destinations",
"url": "#0"
},
{
"text": "Culture",
"url": "#0"
},
{
"text": "Food",
"url": "#0"
},
{
"text": "Fitness",
"url": "#0"
},
{
"text": "Wellbeing",
"url": "#0"
},
{
"text": "Asta Recommends",
"url": "#0"
},
{
"text": "Gifts",
"url": "#0"
},
{
"text": "Other",
"url": "#0"
},
{
"text": "Other",
"url": "#0"
},
{
"text": "Other",
"url": "#0"
},
{
"text": "Other",
"url": "#0"
}
]
},
"cards": [
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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"
}
},
{
"tag": {
"url": "#0",
"text": "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-vertical__item {
@include mq($from: breakpoint('md')) {
&:nth-child(even) {
margin-right: 0;
}
}
@include mq($from: breakpoint('md')) {
&:nth-child(even) {
@apply .mr-su;
}
&:nth-child(3n) {
margin-right: 0;
}
}
}
Add filter by reveal on mobile
Add ajax loading for filtering