.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%; } } }