/// /// Forty by HTML5 UP /// html5up.net | @ajlkn /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) /// /* Tiles */ .tiles { @include vendor('display', 'flex'); @include vendor('flex-wrap', 'wrap'); border-top: 0 !important; & + * { border-top: 0 !important; } article { @include vendor('align-items', 'center'); @include vendor('display', 'flex'); @include vendor('transition', ( 'transform 0.25s ease', 'opacity 0.25s ease', 'filter 1s ease', '-webkit-filter 1s ease' )); @include padding(4em, 4em); background-position: center; background-repeat: no-repeat; background-size: cover; cursor: default; height: 40vh; max-height: 40em; min-height: 23em; overflow: hidden; position: relative; width: 40%; .image { display: none; } header { position: relative; z-index: 3; } h3 { font-size: 1.75em; a { &:hover { color: inherit !important; } } } .link.primary { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 4; } &:before { @include vendor('transition', 'opacity 0.5s ease'); bottom: 0; content: ''; display: block; height: 100%; left: 0; opacity: 0.85; position: absolute; width: 100%; z-index: 2; } &:after { background-color: transparentize(_palette(bg), 0.75); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } &:hover { &:before { opacity: 0; } } &.is-transitioning { @include vendor('transform', 'scale(0.95)'); @include vendor('filter', 'blur(0.5em)'); opacity: 0; } &:nth-child(4n - 1), &:nth-child(4n - 2) { width: 60%; } &:nth-child(6n - 5) { &:before { background-color: _palette(accent1); } } &:nth-child(6n - 4) { &:before { background-color: _palette(accent2); } } &:nth-child(6n - 3) { &:before { background-color: _palette(accent3); } } &:nth-child(6n - 2) { &:before { background-color: _palette(accent4); } } &:nth-child(6n - 1) { &:before { background-color: _palette(accent5); } } &:nth-child(6n) { &:before { background-color: _palette(accent6); } } } @include breakpoint(large) { article { @include padding(4em, 3em); height: 30vh; max-height: 30em; min-height: 20em; } } @include breakpoint(medium) { article { width: 50% !important; } } @include breakpoint(small) { article { @include padding(3em, 1.5em); height: 16em; max-height: none; min-height: 0; h3 { font-size: 1.5em; } } } @include breakpoint(xsmall) { display: block; article { height: 20em; width: 100% !important; } } }