Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
<div class="o-grid11 row">
<div class="o-grid11__column o-grid11__column--background col-md-10 col-lg-12">
<div class="o-grid11__thumb">
<div class="o-grid11__foreground a-background a-background--cover">
<img src="https://placehold.it/400x400/" loading="lazy" width="400" height="400" alt="Title 01">
</div>
<div class="o-grid11__background"></div>
<div class="o-grid11__shadow"></div>
</div>
</div>
<div class="o-grid11__break col-24">
<div class="o-grid11__holder"></div>
</div>
<div class="o-grid11__column o-grid11__column--content col-md-14 col-lg-12">
<div class="o-grid11__inner">
<p class="o-grid11__title">
<a href="#" target="_self" class="text-underline-never">
<strong> Title 01 </strong>
</a>
</p>
<p class="o-grid11__perex"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. </p>
<div class="m-buttons">
<a href="#" target="_self" class="a-button"> Detail </a>
</div>
</div>
</div>
</div>
<div class="o-grid11 row">
<div class="o-grid11__column o-grid11__column--background col-md-10 col-lg-12">
<div class="o-grid11__thumb">
<div class="o-grid11__foreground a-background a-background--cover">
<img src="https://placehold.it/400x400/" loading="lazy" width="400" height="400" alt="Title 01">
</div>
<div class="o-grid11__background"></div>
<div class="o-grid11__shadow"></div>
</div>
</div>
<div class="o-grid11__break col-24">
<div class="o-grid11__holder"></div>
</div>
<div class="o-grid11__column o-grid11__column--content col-md-14 col-lg-12">
<div class="o-grid11__inner">
<p class="o-grid11__title">
<a href="#" target="_self" class="text-underline-never">
<strong> Title 02 </strong>
</a>
</p>
<p class="o-grid11__perex"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation. </p>
<div class="m-buttons">
<a href="#" target="_self" class="a-button"> Detail </a>
</div>
</div>
</div>
</div>@import "atoms/background/index";
@import "atoms/button/index";
.o-grid11 {
$self: &;
&__column {
display: flex;
&--background {
align-self: center;
display: block;
}
}
&:nth-child(odd) {
#{$self}__column {
&--background {
direction: rtl;
}
#{$self}__background {
left: auto;
right: 50%;
}
#{$self}__shadow {
left: auto;
right: 12.5%;
}
@media (min-width: breakpoint-min(md)) {
&--background {
order: 2;
}
&--content {
order: 1;
}
}
}
}
&__break {
#{$self} & {
margin-bottom: 0;
margin-top: 0;
}
@media (min-width: breakpoint-min(md)) {
display: none;
}
@media (min-width: breakpoint-min(lg)) {
display: block;
order: 3;
}
}
&__inner {
display: flex;
flex: 1 0 100%;
flex-direction: column;
max-width: 100%;
padding: space(2) 0;
@media (min-width: breakpoint-min(md)) {
padding: space(3);
}
&:link {
@include text-underline(none);
}
}
&__top {
margin-bottom: auto;
}
&__middle {
margin-bottom: auto;
margin-top: auto;
}
&__bottom {
margin-top: auto;
}
#{&} &__title {
margin-bottom: 0;
margin-top: 0;
}
&__holder {
max-width: 66%;
width: 400px;
&:after {
content: '';
display: block;
padding-bottom: 25%;
}
}
&__thumb {
max-width: 66%;
position: relative;
width: 400px;
z-index: 0;
&:after {
content: '';
display: block;
padding-bottom: 100%;
}
}
&__foreground {
background-position: center;
background-size: cover;
box-shadow: 10px 10px 20px color('shadow');
z-index: 3;
}
&__background {
background: color('gray-light');
height: 75%;
left: 50%;
position: absolute;
top: 50%;
width: 100%;
z-index: 2;
}
&__shadow {
background: color('gray-dark');
height: 100%;
left: 12.5%;
position: absolute;
top: 12.5%;
width: 100%;
z-index: 1;
}
}