Landing/src/components/swiper/swiper-test.style.scss
2024-07-16 17:12:11 +03:00

73 lines
1.2 KiB
SCSS

@use "../../assets/stylesheets/base/colors" as *;
@use "../../assets/stylesheets/abstracts/mixins" as *;
.swiper {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 80%;
height: 60%;
max-width: 860px;
@include for-mobile {
max-width: 80%;
}
}
.swiper-slide img {
display: block;
width: 100%;
object-fit: cover;
}
#projects {
.swiper-slide {
p {
&:last-of-type {
text-align: center;
color: $color-text-secondary;
padding-top: 6px;
}
}
.project-info {
div {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-top: 33px;
margin: 0 auto;
width: 50%;
white-space: nowrap;
@include for-mobile {
width: 100%;
}
p {
margin: 0 29px;
text-transform: uppercase;
color: $color-accent-primary;
padding: 0;
@include for-mobile {
margin: 0 12px;
}
}
}
}
&:not(.swiper-slide-active) {
h2 {
opacity: 0;
}
.project-info {
opacity: 0;
}
}
}
}