1
0
forked from SPC/spc-site
varvara_kaplenko/data/home/assets/sass/components/_spotlights.scss

119 lines
2.0 KiB
SCSS
Raw Normal View History

2022-05-13 17:21:06 +03:00
///
/// Forty by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Spotlights */
.spotlights {
border-top: 0 !important;
& + * {
border-top: 0 !important;
}
> section {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'row');
background-color: desaturate(lighten(_palette(bg-alt), 2), 1);
> .image {
background-position: center center;
background-size: cover;
border-radius: 0;
display: block;
position: relative;
width: 30%;
img {
border-radius: 0;
display: block;
width: 100%;
}
&:before {
background: transparentize(_palette(bg), 0.1);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
}
> .content {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
@include vendor('justify-content', 'center');
@include vendor('align-items', 'center');
@include padding(2em, 3em);
width: 70%;
> .inner {
margin: 0 auto;
max-width: 100%;
width: _size(inner);
}
}
&:nth-child(2n) {
@include vendor('flex-direction', 'row-reverse');
background-color: desaturate(lighten(_palette(bg-alt), 4), 2);
> .content {
@include vendor('align-items', 'flex-end');
}
}
}
@include breakpoint('<=xlarge') {
> section {
> .image {
width: 40%;
}
> .content {
width: 60%;
}
}
}
@include breakpoint('<=large') {
> section {
> .image {
width: 45%;
}
> .content {
width: 55%;
}
}
}
@include breakpoint('<=medium') {
> section {
display: block;
> .image {
width: 100%;
}
> .content {
@include padding(4em, 3em);
width: 100%;
}
}
}
@include breakpoint('<=small') {
> section {
> .content {
@include padding(3em, 1.5em);
}
}
}
}