#master .brimstone-content-widget-collage { @media (min-width: 701px) { padding-left: 0; padding-right: 0; } .collage { .slide-inner { position: relative; .div-link { position: absolute; top: 0; right: 0; left: 0; bottom: 0; } .content-text { line-height: $font__line-height-heading; * { margin-top: 0; } } .entry-footer { bottom: auto; top: 0; left: 5px; z-index: 999; } } .slide-inner { &, &:hover, &:active, &:focus, &:visited { .no-custom-color { .content-text { * { color: $color__text-heading; } } } .custom-color { .content-text { * { color: inherit; } } } } } h1, h2, h3, h4, h5, h6 { @include rem('font-size',$font__main-size); } } } .brimstone-content-widget-collage { .collage { position: relative; height: 650px; @media (min-width: 1400px) { height: 700px; } .slide-5 { position: absolute; width: 50%; height: 60%; top: 0; left: 0; .slide-gutter { padding-right: 10px; padding-bottom: 10px; } } .slide-4 { position: absolute; width: 50%; height: 40%; bottom: 0; left: 0; .slide-gutter { padding-right: 10px; padding-top: 10px; } } .slide-3 { position: absolute; width: 50%; height: 40%; top: 0; right: 0; .slide-gutter { padding-left: 10px; padding-bottom: 10px; } } .slide-2 { position: absolute; width: 25%; height: 60%; bottom: 0; right: 25%; .slide-gutter { padding-left: 10px; padding-right: 10px; padding-top: 10px; } } .slide-1 { position: absolute; width: 25%; height: 60%; bottom: 0; right: 0; .slide-gutter { padding-left: 10px; padding-top: 10px; } } .slide { overflow: hidden; .slide-inner { background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; .content-wrapper { position: absolute; padding: 20px; text-align: center; top: 50%; right: 0; left: 0; width: 100%; max-width: none; margin: 0 auto; @include crossBrowser('transform',translateY(-50%)); &.text-background-color { padding: 30px; } .content-text + .button-text { margin-top: 20px; } .content-text > *:first-child { margin-top: 0; } .content-text > *:last-child { margin-bottom: 0; } } } } .carousel-item, .slide-overflow, .slide-gutter, .slide-inner { width: 100%; height: 100%; display: block; } .bx2-wrapper, .bx2-viewport { width: 100%; height: 100% !important; display: block; } .slide-gutter { box-sizing: border-box; } .slide-overflow { overflow: hidden; } &.slider-control-light .post-edit-link, &.slider-control-light .bx2-wrapper .bx2-controls-direction a { color: rgb(255, 255, 255 ); color: rgba(255, 255, 255, 1); } &.slider-control-light .post-edit-link:hover, &.slider-control-light .bx2-wrapper .bx2-controls-direction a:hover, &.slider-control-light .bx2-wrapper .bx2-controls-direction a:focus { color: rgb(255, 255, 255 ); color: rgba(255, 255, 255, 0.9); } &.slider-control-light .bx2-wrapper .bx2-pager.bx2-default-pager a { background-color: rgb(255, 255, 255 ); background-color: rgba(255, 255, 255, 0.3); } &.slider-control-light .bx2-wrapper .bx2-pager.bx2-default-pager a:hover, &.slider-control-light .bx2-wrapper .bx2-pager.bx2-default-pager a.active, &.slider-control-light .bx2-wrapper .bx2-pager.bx2-default-pager a:focus { background-color: rgb(255, 255, 255 ); background-color: rgba(255, 255, 255, 1); } } } @media screen and (max-width : 991px) { .brimstone-content-widget-collage { .collage { height: 1300px; max-width: 520px; margin-left: auto; margin-right: auto; .slide-5 { width: 100%; height: 30%; top: 0; left: 0; .slide-gutter { padding-right: 0; padding-bottom: 10px; } } .slide-4 { width: 100%; height: 20%; top: 30%; left: 0; .slide-gutter { padding-right: 0; padding-top: 10px; padding-bottom: 10px; } } .slide-3 { width: 100%; height: 20%; top: 50%; right: 0; .slide-gutter { padding-top: 10px; padding-left: 0; padding-bottom: 10px; } } .slide-2 { width: 50%; height: 30%; bottom: 0; left: 0; right: auto; .slide-gutter { padding-left: 0; padding-right: 10px; padding-top: 10px; } } .slide-1 { width: 50%; height: 30%; bottom: 0; right: 0; .slide-gutter { padding-left: 10px; padding-top: 10px; } } } } } @media screen and (max-width : 568px) { #master .brimstone-content-widget-collage { .collage { height: 1500px; .slide { width: 100%; height: 20%; .slide-inner { .content-wrapper { &.text-background-color { padding: 20px; } } } .slide-gutter { padding: 0; } } .slide-4, .slide-3, .slide-2, .slide-1 { left: 0; right: 0; bottom: auto; .slide-gutter { padding: 20px 0 0 0; } } .slide-4 { top: 20%; } .slide-3 { top: 40%; } .slide-2 { top: 60%; } .slide-1 { top: 80%; } } } }