Learn more »
Push, build, and install
RubyGems
npm packages
Python packages
Maven artifacts
PHP packages
Go Modules
Bower components
Debian packages
RPM packages
NuGet packages
@mixin grid-item ($col-start, $col-end, $row-start, $row-end) {
-ms-grid-column: $col-start;
-ms-grid-column-span: $col-end - $col-start;
-ms-grid-row: $row-start;
-ms-grid-row-span: $row-end - $row-start;
grid-column: #{$col-start}/#{$col-end};
grid-row: #{$row-start}/#{$row-end};
}
.jet-smart-tiles {
&-slide {
display: none;
&:first-child {
display: block;
}
&__wrap {
display: grid;
display: -ms-grid;
justify-content: stretch;
&.layout-2-1-2 {
grid-template-columns: 1fr 50% 1fr;
grid-template-rows: 1fr 1fr;
-ms-grid-columns: 1fr 50% 1fr;
-ms-grid-rows: 1fr 1fr;
> div:nth-child( 3 ) {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
-ms-grid-column: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
.jet-smart-tiles__box-excerpt {
max-height: 20em;
opacity: 1;
}
}
> div:nth-child( 1 ) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
> div:nth-child( 2 ) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
> div:nth-child( 4 ) {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
> div:nth-child( 5 ) {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
@media ( max-width: 1024px ) {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: 1fr 1fr 1fr;
-ms-grid-columns: 1fr 1fr !important;
-ms-grid-rows: 1fr 1fr 1fr;
> div:nth-child( 3 ) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
}
> div:nth-child( 1 ) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}
> div:nth-child( 2 ) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
> div:nth-child( 4 ) {
-ms-grid-column: 1;
-ms-grid-row: 3;
}
> div:nth-child( 5 ) {
-ms-grid-column: 2;
-ms-grid-row: 3;
}
}
@media (max-width: 767px) {
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
}
&.layout-1-1-2-h {
grid-template-columns: 50% 1fr 1fr;
grid-template-rows: 1fr 1fr;
-ms-grid-columns: 50% 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
> div:nth-child( 1 ) {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 3;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
.jet-smart-tiles__box-excerpt {
max-height: 20em;
opacity: 1;
}
}
> div:nth-child( 2 ) {
grid-column-start: 2;
grid-column-end: 4;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
-ms-grid-row: 1;
}
> div:nth-child( 3 ) {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
> div:nth-child( 4 ) {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
@media ( max-width: 1024px ) {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: 1fr 1fr 1fr;
-ms-grid-columns: 1fr 1fr !important;
-ms-grid-rows: 1fr 1fr 1fr;
> div:nth-child( 1 ) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
}
> div:nth-child( 2 ) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
-ms-grid-row: 2;
-ms-grid-row-span: 1;
}
> div:nth-child( 3 ) {
-ms-grid-column: 1;
-ms-grid-row: 3;
}
> div:nth-child( 4 ) {
-ms-grid-column: 2;
-ms-grid-row: 3;
}
}
@media (max-width: 767px) {
grid-template-rows: 1fr 1fr 1fr 1fr;
}
}
&.layout-1-1-2-v {
grid-template-columns: 50% 1fr 1fr;
grid-template-rows: 1fr 1fr;
-ms-grid-columns: 50% 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
> div:nth-child( 1 ) {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 3;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
.jet-smart-tiles__box-excerpt {
max-height: 20em;
opacity: 1;
}
}
> div:nth-child( 2 ) {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
-ms-grid-column: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
}
> div:nth-child( 3 ) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
> div:nth-child( 4 ) {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
@media ( max-width: 1024px ) {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: 1fr 1fr 1fr;
-ms-grid-columns: 1fr 1fr !important;
-ms-grid-rows: 1fr 1fr 1fr;
> div:nth-child( 1 ) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
}
> div:nth-child( 2 ) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 2;
}
> div:nth-child( 3 ) {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
> div:nth-child( 4 ) {
-ms-grid-column: 2;
-ms-grid-row: 3;
}
}
@media (max-width: 767px) {
grid-template-rows: 1fr 1fr 1fr 1fr;
}
}
&.layout-1-2 {
grid-template-columns: 50% 1fr;
grid-template-rows: 1fr 1fr;
-ms-grid-columns: 50% 1fr;
-ms-grid-rows: 1fr 1fr;
> div:nth-child( 1 ) {
grid-row-start: 1;
grid-row-end: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
.jet-smart-tiles__box-excerpt {
max-height: 20em;
opacity: 1;
}
}
> div:nth-child( 2 ) {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
> div:nth-child( 3 ) {
-ms-grid-row: 2;
-ms-grid-column: 2;
}
@media (max-width: 767px) {
grid-template-rows: 1fr 1fr 1fr;
}
}
&.layout-1-2-2 {
grid-template-columns: 50% 1fr 1fr;
grid-template-rows: 1fr 1fr;
-ms-grid-columns: 50% 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
> div:nth-child( 1 ) {
grid-row-start: 1;
grid-row-end: 3;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 2;
.jet-smart-tiles__box-excerpt {
max-height: 20em;
opacity: 1;
}
}
> div:nth-child( 2 ) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}
> div:nth-child( 3 ) {
-ms-grid-column: 3;
-ms-grid-row: 1;
}
> div:nth-child( 4 ) {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
> div:nth-child( 5 ) {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
@media ( max-width: 1024px ) {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: 1fr 1fr 1fr;
-ms-grid-columns: 1fr 1fr !important;
-ms-grid-rows: 1fr 1fr 1fr;
> div:nth-child( 1 ) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
}
> div:nth-child( 2 ) {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
> div:nth-child( 3 ) {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
> div:nth-child( 4 ) {
-ms-grid-column: 1;
-ms-grid-row: 3;
}
> div:nth-child( 5 ) {
-ms-grid-column: 2;
-ms-grid-row: 3;
}
}
@media (max-width: 767px) {
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
}
&.layout-2-3-v {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr 1fr;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
> div:nth-child( 1 ) {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
-ms-grid-column: 1;