<div class="o-grid14">
<div class="o-grid14__column o-grid14__column--1">
<div class="o-grid14__item o-grid14__item--feature">
<div class="o-grid14__thumb">
<div class="o-grid14__thumb__file a-background a-background--cover">
<img src="https://placehold.it/600x300/" width="600" height="300" alt="Preview" loading="lazy">
</div>
</div>
<div class="o-grid14__content">
<h3 class="o-grid14__title"> Title 01 </h3>
<p class="o-grid14__perex"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
</div>
<a href="#" target="_self" class="o-grid14__link"></a>
</div>
</div>
<div class="o-grid14__column o-grid14__column--2">
<div class="o-grid14__item o-grid14__item--feature">
<div class="o-grid14__thumb">
<div class="o-grid14__thumb__file a-background a-background--cover">
<img src="https://placehold.it/600x300/" width="600" height="300" alt="Preview" loading="lazy">
</div>
</div>
<div class="o-grid14__content">
<h3 class="o-grid14__title"> Title 02 </h3>
<p class="o-grid14__perex"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. </p>
</div>
<a href="#" target="_self" class="o-grid14__link"></a>
</div>
</div>
<div class="o-grid14__column o-grid14__column--3">
<div class="o-grid14__item">
<div class="o-grid14__thumb">
<div class="o-grid14__thumb__file a-background a-background--cover">
<img src="https://placehold.it/300x300/" width="300" height="300" alt="Preview" loading="lazy">
</div>
</div>
<div class="o-grid14__content">
<h3 class="o-grid14__title"> Title 03 </h3>
</div>
<div class="o-grid14__caret a-icon-angle-right"></div>
<a href="#" target="_self" class="o-grid14__link"></a>
</div>
<div class="o-grid14__item">
<div class="o-grid14__thumb">
<div class="o-grid14__thumb__file a-background a-background--cover">
<img src="https://placehold.it/300x300/" width="300" height="300" alt="Preview" loading="lazy">
</div>
</div>
<div class="o-grid14__content">
<h3 class="o-grid14__title"> Title 04 </h3>
</div>
<div class="o-grid14__caret a-icon-angle-right"></div>
<a href="#" target="_self" class="o-grid14__link"></a>
</div>
<div class="o-grid14__item">
<div class="o-grid14__thumb">
<div class="o-grid14__thumb__file a-background a-background--cover">
<img src="https://placehold.it/300x300/" width="300" height="300" alt="Preview" loading="lazy">
</div>
</div>
<div class="o-grid14__content">
<h3 class="o-grid14__title"> Title 05 </h3>
</div>
<div class="o-grid14__caret a-icon-angle-right"></div>
<a href="#" target="_self" class="o-grid14__link"></a>
</div>
</div>
<div class="position-absolute w-100"></div>
</div>@import "atoms/background/index";
@import "atoms/button/index";
$grid14-gutter: 10px;
.o-grid14 {
$self: &;
margin-left: -($grid14-gutter / 2);
margin-right: -($grid14-gutter / 2);
@media(min-width: breakpoint-min(sm)) {
display: flex;
flex-wrap: wrap;
}
&__thumb {
align-self: stretch;
background-color: color('gray-light');
flex: 0 0 33.333%;
max-width: 33.333%;
position: relative;
transition: $base-transition;
#{&} &__file {
background-position: center;
background-size: cover;
z-index: 1;
}
}
&__content {
flex: 0 0 66.667%;
max-width: 66.667%;
padding: space(2);
}
&__caret {
@include font-size(xx-large);
color: color('white');
flex: 0 0 33.333%;
max-width: 33.333%;
text-align: right;
transition: $base-transition;
}
&__title,
&__perex {
margin: 0 0 space(1);
transition: color $base-transition;
width: 100%;
}
&__link {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
&__column {
padding-left: ($grid14-gutter / 2);
padding-right: ($grid14-gutter / 2);
+ #{&} {
margin-top: $grid14-gutter;
}
@media(min-width: breakpoint-min(sm)) {
display: flex;
flex: 1 0 100%;
flex-direction: column;
max-width: 100%;
+ #{&} {
margin-top: 0;
}
&--2,
&--3 {
flex-basis: 50%;
max-width: 50%;
}
}
@media(min-width: breakpoint-min(lg)) {
flex: 1 0;
&--2 {
flex-basis: 20%;
order: -1;
max-width: 20%;
}
&--3 {
flex-basis: 40%;
max-width: 40%;
}
}
}
&__item {
align-items: center;
display: flex;
flex: 1 0 auto;
flex-wrap: nowrap;
margin-bottom: $grid14-gutter;
overflow: hidden;
position: relative;
z-index: 0;
&:last-child {
margin-bottom: 0;
}
&:hover {
&:not(#{$self}__item--feature) {
&:not(#{$self}__item--single) {
background-color: color('gray-dark');
#{$self}__title,
#{$self}__perex {
color: color('white');
> * {
color: inherit;
}
}
#{$self}__thumb {
margin-left: -33.333%;
}
}
}
}
&--single {
display: block;
#{$self}__thumb,
#{$self}__content {
max-width: 100%;
width: 100%;
}
#{$self}__thumb {
padding-top: 56.25%;
}
@media(max-width: breakpoint-max(md)) {
#{$self}__content {
padding-left: 0;
padding-right: 0;
}
}
@media(min-width: breakpoint-min(lg)) {
display: flex;
#{$self}__thumb,
#{$self}__content {
flex: 0 0 50%;
max-width: 50%;
width: 50%;
}
#{$self}__thumb {
padding-top: 0;
}
}
}
&--feature {
align-items: stretch;
flex-wrap: wrap;
padding-top: 150px;
#{$self}__content {
flex: 0 0 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
width: 100%;
}
#{$self}__thumb {
max-width: 100%;
padding-top: inherit;
position: absolute;
top: 0;
width: 100%;
}
@media(max-width: breakpoint-max(xs)) {
#{$self}__column--2 & {
align-items: center;
flex-wrap: nowrap;
padding-top: 0;
#{$self}__content {
flex: 0 0 66.667%;
max-width: 66.667%;
padding: space(2);
width: auto;
}
#{$self}__thumb {
flex: 0 0 33.333%;
max-width: 33.333%;
padding-top: 0;
position: relative;
width: auto;
}
}
}
@media(min-width: breakpoint-min(md)) {
padding-top: 200px;
}
@media(min-width: breakpoint-min(lg)) {
flex-direction: column;
flex-grow: 1;
#{$self}__content {
align-items: stretch;
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
}
}
}
&__tags {
margin-top: auto;
}
}