mirror of
https://github.com/yusufipk/nexter-react.git
synced 2026-09-11 09:36:09 +00:00
72 lines
1.3 KiB
SCSS
72 lines
1.3 KiB
SCSS
.story {
|
|
&__pictures {
|
|
background-color: $color-primary;
|
|
grid-column: full-start / col-end 4;
|
|
background-image: linear-gradient(
|
|
rgba($color-primary, 0.5),
|
|
rgba($color-primary, 0.5)
|
|
),
|
|
url(../commons/img/back.jpg);
|
|
background-size: cover;
|
|
|
|
display: grid;
|
|
grid-template-rows: repeat(6, 1fr);
|
|
grid-template-columns: repeat(6, 1fr);
|
|
align-items: center;
|
|
|
|
@include media("<medium") {
|
|
grid-column: 1 / -1;
|
|
padding: 6rem;
|
|
}
|
|
}
|
|
|
|
&__img--1 {
|
|
width: 100%;
|
|
grid-row: 2 / 6;
|
|
grid-column: 2 / 6;
|
|
box-shadow: 0 2rem 5rem rgba(#000, 0.1);
|
|
|
|
@include media("<medium") {
|
|
grid-column: 1 / 5;
|
|
grid-row: 1 / -1;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&__img--2 {
|
|
width: 115%;
|
|
z-index: 1;
|
|
grid-row: 4 / 6;
|
|
grid-column: 4 / 7;
|
|
box-shadow: 0 2rem 5rem rgba(#000, 0.2);
|
|
|
|
@include media("<medium") {
|
|
grid-row: 1 / -1;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
background-color: $color-grey-light-1;
|
|
grid-column: col-start 5 / full-end;
|
|
|
|
padding: 6rem 8vw;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
|
|
@include media("<medium") {
|
|
grid-column: 1 / -1;
|
|
grid-row: 5 / 6;
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
font-size: 1.5rem;
|
|
font-style: italic;
|
|
margin-bottom: 4rem;
|
|
}
|
|
}
|