File: //var/www/quadcode-jobs/resources/sass/components/_team.scss
@import "../variables";
.team {
padding-top: 40px;
padding-bottom: 80px;
--slide-template-columns: 1fr 380px;
--slide-template-areas: 'description image';
--slide-gap: 67px;
--slide-height: auto;
--slide-image-height: 57rem;
--slide-image-width: 48rem;
@include breakpoint-down('lg') {
--blockquote-bg: none;
--blockquote-padding-top: 0;
--blockquote-padding-left: 0;
--blockquote-author-offset: 4rem;
--blockquote-author-position-offset: 0;
margin-bottom: 84px;
padding-bottom: 0;
--slide-image-height: 57rem;
--slide-image-width: 48rem;
--slide-template-columns: 1fr 275px;
--slide-gap: 10px;
}
@include breakpoint-down('sm') {
padding-top: 24px;
margin-bottom: 0;
}
.container {
@include breakpoint-down('lg') {
padding: 0;
}
//@include breakpoint-down('sm') {
// padding: 0 27px;
//}
}
&__inner {
position: relative;
@include breakpoint-down('lg') {
position: static;
}
.app-section__header {
margin-bottom: 25px;
@include breakpoint-down('lg') {
margin-bottom: 15px;
}
@include breakpoint-down('sm') {
margin-bottom: 38px;
}
}
}
.team-slider {
&__item-inner {
display: grid;
grid-template-columns: var(--slide-template-columns);
grid-template-areas: var(--slide-template-areas);
align-items: center;
gap: var(--slide-gap);
height: var(--slide-height);
padding: 0 84px;
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='216px' height='185px' viewbox='0 0 216 185' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='quote_symbol'%3E%3Cpath d='M47.52 160.95C70.9714 160.95 89.4857 141.833 89.4857 119.017C89.4857 96.2 73.44 80.1667 53.0743 80.1667C48.7543 80.1667 43.8171 80.7833 42.5829 81.4C46.2857 60.4333 67.2686 35.15 87.0172 23.4333L57.3943 0C23.4514 24.05 0 62.2833 0 104.833C0 140.6 22.2171 160.95 47.52 160.95ZM161.691 160.95C185.143 160.95 203.657 141.833 203.657 119.017C203.657 96.2 187.611 80.1667 167.246 80.1667C162.926 80.1667 157.989 80.7833 156.754 81.4C160.457 60.4333 181.44 35.15 201.189 23.4333L171.566 0C137.623 24.05 114.171 62.2833 114.171 104.833C114.171 140.6 136.389 160.95 161.691 160.95Z' transform='matrix(1 0 0 1 -2.842171E-14 -2.2737368E-13)' id='“' fill='%23F8FAFB' stroke='none' /%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 85px 0;
@include breakpoint-down('lg') {
padding: 0 70px 0 85px;
align-items: flex-end;
background-position: 85px 0;
}
@include breakpoint-down('sm') {
grid-template-columns: 100%;
grid-template-areas: 'image' 'description';
gap: 23px;
padding: 0;
background-position: 0 0;
}
}
&__item-description {
width: 483px;
font-size: 18px;
line-height: 24px;
grid-area: description;
background-repeat: no-repeat;
height: 100%;
display: flex;
align-items: center;
@include breakpoint-down('lg') {
width: 332px;
}
@include breakpoint-down('sm') {
width: 100%;
}
.blockquote {
margin-top: 50px;
@include breakpoint-down('lg') {
margin-top: 38px;
font-size: 16px;
}
@include breakpoint-down('sm') {
margin-top: 0;
}
}
.blockquote__author {
font-size: 24px;
font-weight: 600;
margin-top: 41px;
@include breakpoint-down('lg') {
margin-top: 15px;
}
&-position {
font-size: 16px;
font-weight: 400;
color: #768490;
margin-top: 3px;
@include breakpoint-down('lg') {
margin-top: 0;
}
}
}
@include breakpoint-down('lg') {
align-self: center;
}
}
.slick-list {
@include breakpoint-down('lg') {
height: auto !important;
}
}
&__item-image {
grid-area: image;
overflow: hidden;
width: 377px;
height: 377px;
@include breakpoint-down('lg') {
height: 195px;
width: 195px;
}
@include breakpoint-down('sm') {
height: 370px;
width: 100%;
}
img {
height: 100%;
width: 100%;
object-fit: contain;
}
}
}
.team-slider-nav {
margin-top: 3.7rem;
@include breakpoint-down('lg') {
margin: 0 auto;
}
@include breakpoint-down('sm') {
max-width: 340px;
margin-top: 28px;
}
.slick-list {
padding: 0 !important;
}
&__item {
cursor: pointer;
}
&__item-marker {
height: 5px;
background-color: var(--current-slide-marker-color, var(--color-line));
transition: background-color .25s;
@include breakpoint-down('lg') {
height: 3.45px;
}
}
&__item-name {
margin-top: 0.8rem;
color: var(--current-slide-text-color, var(--color-text-gray));
transition: color .25s;
@include breakpoint-down('lg') {
display: none;
}
}
.slick-track {
display: flex;
justify-content: space-between;
transform: none !important; // smoother view
@include breakpoint-down('sm') {
justify-content: center;
}
&:before,
&:after {
display: none; // we dont need it
}
.slick-slide {
@include breakpoint-down('sm') {
max-width: 20px;
}
&:not(:last-of-type) {
margin-right: 3rem;
@include breakpoint-down('lg') {
margin-right: 20px;
}
@include breakpoint-down('sm') {
margin-right: 6px;
}
}
}
// Current element
.slick-current {
--current-slide-marker-color: var(--color-highlight); // &__item-marker
--current-slide-text-color: var(--color-text-primary); // &__item-name
}
}
}
.team-slider-arrow {
position: absolute;
top: 50%;
cursor: pointer;
@include breakpoint-down('lg') {
top: 220px;
}
@include breakpoint-down('sm') {
top: 303px;
}
//@media (max-width: 811px) {
// display: none;
//}
&.as-prev-btn {
left: 0;
transform: translateY(-50%);
@include breakpoint-down('lg') {
left: 23px;
transform: none;
}
@include breakpoint-down('sm') {
left: 0;
}
}
&.as-next-btn {
right: 0;
transform: translateY(-50%);
@include breakpoint-down('lg') {
right: 23px;
transform: none;
}
@include breakpoint-down('sm') {
right: 0;
}
}
}
}