ITRadio/client/src/assets/css/module/team.scss

123 lines
2.6 KiB
SCSS

.team {
margin-left: auto;
max-width: calc(100vw - ((100vw - var(--container)) / 2));
margin-bottom: var(--space-between-sections);
position: relative;
z-index: 2;
@mixin responsive-xl {
padding: 0 0 0 20px;
}
&__header {
display: flex;
max-width: var(--container);
margin-right: auto;
padding: 0 50px 0;
margin-bottom: var(--space-between-block);
@mixin responsive-xl {
padding: 0 40px 0 0;
column-gap: var(--space-between-block);
}
@mixin responsive-s {
flex-wrap: wrap;
}
}
&__title {
margin-bottom: 0;
margin-right: auto;
text-wrap: nowrap;
}
&__slider {
&:hover {
cursor: url("./assets/img/icon/cursorDragAndDrop.svg"), auto;
}
.swiper-wrapper {
}
}
&__item {
}
&__tools {
margin-top: 65px;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
max-width: var(--container);
margin-right: auto;
row-gap: 1.5rem;
padding: 0 50px 0;
@mixin responsive-xl {
padding: 0 80px 0 35px;
}
@mixin responsive-l {
padding: 0 40px 0 0;
}
.m--link{
@mixin responsive-s {
width: 100%;
display: flex;
justify-content: flex-end;
}
}
}
&__progress {
width: 100%;
height: 4px;
position: relative;
max-width: 460px;
background: var(--color-white-opacity);
border-radius: 20px;
overflow: hidden;
@mixin responsive-s {
max-width: none;
}
span {
background: var(--color-white);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-origin: left top;
}
}
&__cover {
margin-bottom: 0.5rem;
height: 450px;
overflow: hidden;
}
&__name {
font-weight: 500;
font-size: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
span {
font-weight: 400;
font-size: 1.125rem;
}
}
&__description {
max-width: 820px;
@mixin responsive-xl {
max-width: calc(100% - var(--space-between-block));
}
@mixin responsive-s {
max-width: none;
width: 100%;
}
}
}