­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ :root { --jet-blog-tiles-col-width: 320px; } @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 { word-wrap: anywhere; &-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; -ms-grid-column-span: 3; -ms-grid-row: 1; -ms-grid-row-span: 1; } > div:nth-child( 2 ) { grid-column-start: 4; grid-column-end: 7; grid-row-start: 1; grid-row-end: 2; -ms-grid-column: 4; -ms-grid-column-span: 3; -ms-grid-row: 1; -ms-grid-row-span: 1; } > 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: 2; } > div:nth-child( 4 ) { grid-column-start: 3; grid-column-end: 5; grid-row-start: 2; grid-row-end: 3; -ms-grid-column: 3; -ms-grid-column-span: 2; -ms-grid-row: 2; -ms-grid-row-span: 2; } > div:nth-child( 5 ) { grid-column-start: 5; grid-column-end: 7; grid-row-start: 2; grid-row-end: 3; -ms-grid-column: 5; -ms-grid-column-span: 2; -ms-grid-row: 2; -ms-grid-row-span: 2; } @media ( max-width: 1024px ) { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr; > div:nth-child( 1 ) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; -ms-grid-column: 1; -ms-grid-column-span: 1; -ms-grid-row: 1; -ms-grid-row-span: 3; } > div:nth-child( 2 ) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 7; -ms-grid-column: 1; -ms-grid-column-span: 1; -ms-grid-row: 4; -ms-grid-row-span: 3; } > div:nth-child( 3 ) { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; -ms-grid-column: 2; -ms-grid-column-span: 1; -ms-grid-row: 1; -ms-grid-row-span: 2; } > div:nth-child( 4 ) { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 5; -ms-grid-column: 2; -ms-grid-column-span: 1; -ms-grid-row: 3; -ms-grid-row-span: 2; } > div:nth-child( 5 ) { grid-column-start: 2; grid-column-end: 3; grid-row-start: 5; grid-row-end: 7; -ms-grid-column: 2; -ms-grid-column-span: 1; -ms-grid-row: 5; -ms-grid-row-span: 2; } } @media (max-width: 767px) { grid-template-rows: 1fr 1fr 1fr 1fr 1fr; } } &.layout-2-x { grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr 1fr; > div:nth-child( 1 ) { -ms-grid-column: 1; -ms-grid-row: 1; } > div:nth-child( 2 ) { -ms-grid-column: 2; -ms-grid-row: 1; } } &.layout-3-x { grid-template-columns: repeat(3, 1fr); -ms-grid-columns: 1fr 1fr 1fr; > 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( 3 ) { -ms-grid-column: 3; -ms-grid-row: 1; } } &.layout-4-x { grid-template-columns: repeat(4, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr; > 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( 3 ) { -ms-grid-column: 3; -ms-grid-row: 1; } > div:nth-child( 4 ) { -ms-grid-column: 4; -ms-grid-row: 1; } @media ( max-width: 1024px ) { grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr 1fr; > 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( 3 ) { -ms-grid-column: 1; -ms-grid-row: 2; } > div:nth-child( 4 ) { -ms-grid-column: 2; -ms-grid-row: 2; } } @media (max-width: 767px) { grid-template-rows: 1fr 1fr 1fr 1fr; } } &.rows-1 { grid-template-rows: 1fr; -ms-grid-rows: 1fr; @media ( max-width: 1024px ) { &.layout-4-x { grid-template-rows: repeat(2, 1fr); -ms-grid-rows: 1fr 1fr; } } @media (max-width: 767px) { &.layout-4-x { grid-template-rows: 1fr 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr; } &.layout-3-x { grid-template-rows: 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr; } &.layout-2-x { grid-template-rows: 1fr 1fr; -ms-grid-rows: 1fr 1fr; } } } &.rows-2 { grid-template-rows: repeat(2, 1fr); -ms-grid-rows: 1fr 1fr; &.layout-2-x { > div:nth-child( 3 ) { -ms-grid-column: 1; -ms-grid-row: 2; } > div:nth-child( 4 ) { -ms-grid-column: 2; -ms-grid-row: 2; } } &.layout-3-x { > div:nth-child( 4 ) { -ms-grid-column: 1; -ms-grid-row: 2; } > div:nth-child( 5 ) { -ms-grid-column: 2; -ms-grid-row: 2; } > div:nth-child( 6 ) { -ms-grid-column: 3; -ms-grid-row: 2; } } &.layout-4-x { > div:nth-child( 5 ) { -ms-grid-column: 1; -ms-grid-row: 2; } > div:nth-child( 6 ) { -ms-grid-column: 2; -ms-grid-row: 2; } > div:nth-child( 7 ) { -ms-grid-column: 3; -ms-grid-row: 2; } > div:nth-child( 8 ) { -ms-grid-column: 4; -ms-grid-row: 2; } } @media ( max-width: 1024px ) { &.layout-4-x { grid-template-rows: repeat(4, 1fr); -ms-grid-rows: 1fr 1fr 1fr 1fr; > div:nth-child( 5 ) { -ms-grid-column: 1; -ms-grid-row: 3; } > div:nth-child( 6 ) { -ms-grid-column: 2; -ms-grid-row: 3; } > div:nth-child( 7 ) { -ms-grid-column: 1; -ms-grid-row: 4; } > div:nth-child( 8 ) { -ms-grid-column: 2; -ms-grid-row: 4; } } } @media ( max-width: 767px ) { grid-template-rows: repeat(4, 1fr); -ms-grid-rows: 1fr 1fr 1fr 1fr; &.layout-3-x { grid-template-rows: repeat(6, 1fr); -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr; } &.layout-4-x { grid-template-rows: repeat(8, 1fr); -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } } &.rows-3 { grid-template-rows: repeat(3, 1fr); -ms-grid-rows: 1fr 1fr 1fr; &.layout-2-x { > div:nth-child( 3 ) { -ms-grid-column: 1; -ms-grid-row: 2; } > div:nth-child( 4 ) { -ms-grid-column: 2; -ms-grid-row: 2; } > div:nth-child( 5 ) { -ms-grid-column: 1; -ms-grid-row: 3; } > div:nth-child( 6 ) { -ms-grid-column: 2; -ms-grid-row: 3; } } &.layout-3-x { > div:nth-child( 4 ) { -ms-grid-column: 1; -ms-grid-row: 2; } > div:nth-child( 5 ) { -ms-grid-column: 2; -ms-grid-row: 2; } > div:nth-child( 6 ) { -ms-grid-column: 3; -ms-grid-row: 2; } > div:nth-child( 7 ) { -ms-grid-column: 1; -ms-grid-row: 3; } > div:nth-child( 8 ) { -ms-grid-column: 2; -ms-grid-row: 3; } > div:nth-child( 9 ) { -ms-grid-column: 3; -ms-grid-row: 3; } } &.layout-4-x { > div:nth-child( 5 ) { -ms-grid-column: 1; -ms-grid-row: 2; } > div:nth-child( 6 ) { -ms-grid-column: 2; -ms-grid-row: 2; } > div:nth-child( 7 ) { -ms-grid-column: 3; -ms-grid-row: 2; } > div:nth-child( 8 ) { -ms-grid-column: 4; -ms-grid-row: 2; } > div:nth-child( 9 ) { -ms-grid-column: 1; -ms-grid-row: 3; } > div:nth-child( 10 ) { -ms-grid-column: 2; -ms-grid-row: 3; } > div:nth-child( 11 ) { -ms-grid-column: 3; -ms-grid-row: 3; } > div:nth-child( 12 ) { -ms-grid-column: 4; -ms-grid-row: 3; } } @media ( max-width: 1024px ) { &.layout-4-x { grid-template-rows: repeat(6, 1fr); -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr; > div:nth-child( 5 ) { -ms-grid-column: 1; -ms-grid-row: 3; } > div:nth-child( 6 ) { -ms-grid-column: 2; -ms-grid-row: 3; } > div:nth-child( 7 ) { -ms-grid-column: 1; -ms-grid-row: 4; } > div:nth-child( 8 ) { -ms-grid-column: 2; -ms-grid-row: 4; } > div:nth-child( 9 ) { -ms-grid-column: 1; -ms-grid-row: 5; } > div:nth-child( 10 ) { -ms-grid-column: 2; -ms-grid-row: 5; } > div:nth-child( 11 ) { -ms-grid-column: 1; -ms-grid-row: 6; } > div:nth-child( 12 ) { -ms-grid-column: 2; -ms-grid-row: 6; } } } @media ( max-width: 767px ) { grid-template-rows: repeat(6, 1fr); -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr; &.layout-3-x { grid-template-rows: repeat(9, 1fr); -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } &.layout-4-x { grid-template-rows: repeat(12, 1fr); -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; } } } &.layout-2-1-2, &.layout-1-1-2-h, &.layout-1-1-2-v, &.layout-1-2, &.layout-1-2-2, &.layout-2-3-v, &.layout-2-x, &.layout-3-x, &.layout-4-x{ @media (max-width: 767px) { grid-template-columns: 1fr!important; -ms-grid-columns: 1fr!important; .jet-smart-tiles:nth-child( 1 ) { @include grid-item(1, 2, 1, 2); } .jet-smart-tiles:nth-child( 2 ) { @include grid-item(1, 2, 2, 3); } .jet-smart-tiles:nth-child( 3 ) { @include grid-item(1, 2, 3, 4); } .jet-smart-tiles:nth-child( 4 ) { @include grid-item(1, 2, 4, 5); } .jet-smart-tiles:nth-child( 5 ) { @include grid-item(1, 2, 5, 6); } .jet-smart-tiles:nth-child( 6 ) { @include grid-item(1, 2, 6, 7); } } } &.layout-2-1-2, &.layout-1-1-2-h, &.layout-1-1-2-v, &.layout-1-2, &.layout-1-2-2, &.layout-2-3-v, &.layout-2-x, &.layout-3-x, &.layout-4-x, &.rows-1, &.rows-2, &.rows-3 { &.scroll-slider-mobile { @media (max-width: 767px) { overflow-x: auto; scroll-snap-type: x mandatory; grid-auto-flow: column; .jet-smart-tiles { grid-column: auto; grid-row: auto; } } } } &.mobile-rows-1 { @media (max-width: 767px) { grid-template-rows: repeat(1, 1fr) !important; &.layout-2-1-2, &.layout-2-3-v, &.layout-1-2-2 { grid-template-columns: repeat(5, var(--jet-blog-tiles-col-width)) !important; } &.layout-1-1-2-h, &.layout-1-1-2-v, &.layout-2-x.rows-2, &.layout-4-x.rows-1 { grid-template-columns: repeat(4, var(--jet-blog-tiles-col-width)) !important; } &.layout-1-2, &.layout-3-x.rows-1 { grid-template-columns: repeat(3, var(--jet-blog-tiles-col-width)) !important; } &.layout-2-x.rows-1 { grid-template-columns: repeat(2, var(--jet-blog-tiles-col-width)) !important; } &.layout-2-x.rows-3, &.layout-3-x.rows-2 { grid-template-columns: repeat(6, var(--jet-blog-tiles-col-width)) !important; } &.layout-3-x.rows-3 { grid-template-columns: repeat(9, var(--jet-blog-tiles-col-width)) !important; } &.layout-4-x.rows-2 { grid-template-columns: repeat(8, var(--jet-blog-tiles-col-width)) !important; } &.layout-4-x.rows-3 { grid-template-columns: repeat(12, var(--jet-blog-tiles-col-width)) !important; } } } &.mobile-rows-2 { @media (max-width: 767px) { grid-template-rows: repeat(2, 1fr) !important; &.layout-2-1-2, &.layout-2-3-v, &.layout-1-2-2 { grid-template-columns: repeat(3, var(--jet-blog-tiles-col-width)) !important; } &.layout-1-1-2-h, &.layout-1-1-2-v, &.layout-2-x.rows-2, &.layout-4-x.rows-1, &.layout-1-2, &.layout-3-x.rows-1 { grid-template-columns: repeat(2, var(--jet-blog-tiles-col-width)) !important; } &.layout-2-x.rows-1 { grid-template-columns: repeat(1, var(--jet-blog-tiles-col-width)) !important; grid-template-rows: repeat(2, 1fr) !important; } &.layout-2-x.rows-3, &.layout-3-x.rows-2 { grid-template-columns: repeat(3, var(--jet-blog-tiles-col-width)) !important; } &.layout-3-x.rows-3 { grid-template-columns: repeat(5, var(--jet-blog-tiles-col-width)) !important; } &.layout-4-x.rows-2 { grid-template-columns: repeat(4, var(--jet-blog-tiles-col-width)) !important; } &.layout-4-x.rows-3 { grid-template-columns: repeat(6, var(--jet-blog-tiles-col-width)) !important; } } } &.mobile-rows-3 { @media (max-width: 767px) { grid-template-rows: repeat(3, 1fr) !important; &.layout-2-1-2, &.layout-2-3-v, &.layout-1-2-2, &.layout-1-1-2-h, &.layout-1-1-2-v, &.layout-2-x.rows-2, &.layout-4-x.rows-1, &.layout-2-x.rows-3, &.layout-3-x.rows-2 { grid-template-columns: repeat(2, var(--jet-blog-tiles-col-width)) !important; } &.layout-1-2, &.layout-3-x.rows-1 { grid-template-columns: repeat(1, var(--jet-blog-tiles-col-width)) !important; } &.layout-2-x.rows-1 { grid-template-columns: repeat(1, var(--jet-blog-tiles-col-width)) !important; grid-template-rows: repeat(2, 1fr) !important; } &.layout-3-x.rows-3, &.layout-4-x.rows-2 { grid-template-columns: repeat(3, var(--jet-blog-tiles-col-width)) !important; } &.layout-4-x.rows-3 { grid-template-columns: repeat(4, var(--jet-blog-tiles-col-width)) !important; } } } &.mobile-rows-4 { @media (max-width: 767px) { grid-template-rows: repeat(4, 1fr) !important; &.layout-2-1-2, &.layout-2-3-v, &.layout-1-2-2 { grid-template-columns: repeat(2, var(--jet-blog-tiles-col-width)) !important; } &.layout-1-1-2-h, &.layout-1-1-2-v, &.layout-2-x.rows-2, &.layout-4-x.rows-1, &.layout-1-2, &.layout-3-x.rows-1, &.layout-2-x.rows-1 { grid-template-columns: repeat(1, var(--jet-blog-tiles-col-width)) !important; } &.layout-2-x.rows-3, &.layout-3-x.rows-2, &.layout-4-x.rows-2 { grid-template-columns: repeat(2, var(--jet-blog-tiles-col-width)) !important; } &.layout-3-x.rows-3, &.layout-4-x.rows-3 { grid-template-columns: repeat(3, var(--jet-blog-tiles-col-width)) !important; } &.layout-1-2, &.layout-3-x.rows-1 { grid-template-rows: repeat(3, 1fr) !important; } &.layout-2-x.rows-1 { grid-template-rows: repeat(2, 1fr) !important; } } } &.mobile-rows-5 { @media (max-width: 767px) { grid-template-rows: repeat(5, 1fr) !important; &.layout-2-1-2, &.layout-2-3-v, &.layout-1-2-2, &.layout-1-1-2-h, &.layout-1-1-2-v, &.layout-2-x.rows-2, &.layout-4-x.rows-1, &.layout-1-2, &.layout-3-x.rows-1, &.layout-2-x.rows-1 { grid-template-columns: repeat(1, var(--jet-blog-tiles-col-width)) !important; } &.layout-1-1-2-h, &.layout-1-1-2-v { grid-template-rows: repeat(4, 1fr) !important; } &.layout-2-x.rows-3, &.layout-3-x.rows-2, &.layout-3-x.rows-3, &.layout-4-x.rows-2 { grid-template-columns: repeat(2, var(--jet-blog-tiles-col-width)) !important; } &.layout-4-x.rows-3 { grid-template-columns: repeat(3, var(--jet-blog-tiles-col-width)) !important; } &.layout-1-2, &.layout-3-x.rows-1 { grid-template-rows: repeat(3, 1fr) !important; } &.layout-2-x.rows-1 { grid-template-rows: repeat(2, 1fr) !important; } &.layout-2-x.rows-2, &.layout-4-x.rows-1 { grid-template-rows: repeat(4, 1fr) !important; } } } &.rows-1.layout-2-x { @media (max-width: 767px) { grid-template-rows: repeat(1, 1fr) !important; } } } } &__meta { .has-author-avatar { display: flex; align-items: center; margin-bottom: 1em; img { margin-right: inherit !important; margin-left: inherit !important; } } &-icon { margin-right: 5px; } &-item { display: inline-block; &:not(:first-child):before { content: ""; display: inline-block; margin-left: 5px; margin-right: 5px; } .jet-smart-listing__post { font-size: .75em; } } } &__box { height: 100%; background-size: cover; position: relative; padding: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: stretch; align-items: flex-start; overflow: hidden; background-position: center; transition: all 200ms linear; &:before { position: absolute; z-index: 0; left: 0; top: 0; right: 0; bottom: 0; content: ''; transition: all 200ms linear; } &-link { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; } &-content { width: 100%; position: relative; z-index: 1; align-self: flex-end; } &-excerpt { transition: all 200ms linear; overflow: hidden; @media ( min-width: 768px ) { .jet-hide-excerpt & { max-height: 0; opacity: 0; } .jet-hide-excerpt .jet-smart-tiles:hover & { max-height: 10em; opacity: 1; transition: all 300ms linear; } } } } &__terms { width: 100%; &-link { position: relative; z-index: 3; display: inline-block; line-height: 1em; padding: 5px 10px; } } &-wrap { .jet-blog-arrow { position: absolute; top: 100%; width: 40px; height: 40px; text-align: center; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 999; &:before { display: block; } &.jet-arrow-prev { left: 0; } &.jet-arrow-next { left: 40px; &:before { transform: scale(-1, 1); } } } &.jet-arrows-on-hover { .jet-blog-arrow { opacity: 0; pointer-events: none; transition: all 200ms; &.jet-arrow-prev { transform: translateX(-5px); } &.jet-arrow-next { transform: translateX(5px); } } &:hover { .jet-blog-arrow { opacity: 1; pointer-events: auto; &.jet-arrow-prev { transform: translateX(0); } &.jet-arrow-next { transform: translateX(0); } } } } } } .elementor-widget-jet-blog-smart-tiles { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; }