51 lines
975 B
SCSS
51 lines
975 B
SCSS
|
/*
|
||
|
|
* Visual Portfolio layout Tiles.
|
||
|
|
*/
|
||
|
|
[data-vp-layout="tiles"] {
|
||
|
|
// Gaps.
|
||
|
|
.vp-portfolio__items,
|
||
|
|
.vp-portfolio__item-wrap .vp-portfolio__item-img-wrap {
|
||
|
|
margin-top: calc(-1 * var(--vp-items__gap-vertical));
|
||
|
|
margin-left: calc(-1 * var(--vp-items__gap));
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__item-wrap .vp-portfolio__item {
|
||
|
|
margin-top: var(--vp-items__gap-vertical);
|
||
|
|
margin-left: var(--vp-items__gap);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Images
|
||
|
|
.vp-portfolio__item-img img,
|
||
|
|
.vp-portfolio__item-img {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__item-img {
|
||
|
|
top: var(--vp-items__gap-vertical);
|
||
|
|
left: var(--vp-items__gap);
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__item-img-wrap {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
display: block;
|
||
|
|
padding-top: 56%;
|
||
|
|
content: "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__item-img img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: var(--vp-images__object-fit);
|
||
|
|
object-position: var(--vp-images__object-position);
|
||
|
|
}
|
||
|
|
}
|