File: /var/www/quadcode-site/src/style/components/manager.scss
.manager {
min-height: 100vh;
@include breakpoint-down('tabM') {
min-height: auto;
}
.container {
padding: 237px 0 0;
@include breakpoint-down('deskL') {
padding-top: 214px;
}
@include breakpoint-down('deskM') {
padding-top: 166px;
}
@include breakpoint-down('deskS') {
padding-top: 100px;
}
@include breakpoint-down('tabM') {
padding-top: 24px;
padding-bottom: 60px;
}
}
&__content {
max-width: 480px;
width: 100%;
@include breakpoint-down('deskL') {
max-width: 420px;
}
@include breakpoint-down('deskS') {
max-width: 334px;
}
}
&__back {
width: max-content;
margin-bottom: 40px;
@include breakpoint-down('deskS') {
margin-bottom: 30px;
}
.btn-link__svg {
transform: scaleX(-1);
margin-right: 10px;
}
}
&__image {
position: absolute;
top: 85px;
right: 0;
width: 49.5%;
bottom: 0;
@include breakpoint-down('deskS') {
top: 60px;
}
@include breakpoint-down('tabM') {
position: unset;
width: 100%;
margin-top: 59px;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
&__title {
position: relative;
}
&__name {
padding-right: 50px;
@include breakpoint-down('deskS') {
font-size: 22px;
line-height: 140%;
}
}
&__icon {
display: flex;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
&__position {
margin-bottom: 30px;
padding-right: 50px;
@include breakpoint-down('deskS') {
margin-bottom: 24px;
}
}
&__text {
> * {
margin-bottom: 30px;
@include breakpoint-down('deskL') {
margin-bottom: 24px;
}
&:last-of-type {
margin-bottom: 0;
}
}
}
&__commas-first {
display: flex;
margin-bottom: 8px;
svg {
@include breakpoint-down('deskL') {
width: 80px;
height: 68px;
}
@include breakpoint-down('deskS') {
width: 68px;
height: 58px;
}
}
}
&__commas-last {
display: flex;
justify-content: flex-end;
@include breakpoint-down('deskS') {
float: right;
margin-top: -47px;
}
svg {
@include breakpoint-down('deskL') {
width: 80px;
height: 68px;
}
@include breakpoint-down('deskS') {
width: 68px;
height: 58px;
}
}
}
&--ubo {
position: relative;
.container {
padding-top: 211px;
padding-bottom: 130px;
@include breakpoint-down('deskL') {
padding-bottom: 60px;
}
@include breakpoint-down('deskM') {
padding-top: 168px;
}
@include breakpoint-down('deskS') {
padding-top: 124px;
}
@include breakpoint-down('tabM') {
padding-top: 86px;
padding-bottom: 0;
}
}
.manager {
&__image {
top: auto;
bottom: 0;
width: 44%;
max-height: 1000px;
height: 100%;
@include breakpoint-down('deskL') {
width: 50%;
right: -92px;
max-height: 916px;
}
@include breakpoint-down('deskM') {
width: 53%;
right: -130px;
}
@include breakpoint-down('deskS') {
top: 123px;
bottom: auto;
right: -73px;
width: 58%;
max-height: 561px;
}
@include breakpoint-down('tabM') {
width: 118%;
margin-top: 55px;
margin-left: -50px;
max-height: none;
}
img {
object-fit: contain;
@include breakpoint-down('tabM') {
max-width: 530px;
margin: 0 auto;
}
}
}
&__back {
margin-bottom: 30px;
@include breakpoint-down('deskM') {
margin-bottom: 24px;
}
}
&__content {
max-width: 680px;
@include breakpoint-down('deskL') {
max-width: 539px;
}
@include breakpoint-down('deskS') {
max-width: 335px;
}
}
&__title {
@include breakpoint-down('deskS') {
margin-top: 31px;
}
}
&__name {
font-size: 28px;
margin-bottom: 8px;
@include breakpoint-down('deskS') {
font-size: 22px;
line-height: 27px;
}
}
&__text {
> * {
margin-bottom: 19px;
@include breakpoint-down('deskS') {
margin-top: 0 !important;
}
}
}
&__position {
font-size: 18px;
margin-bottom: 0;
@include breakpoint-down('deskS') {
font-size: 16px;
}
}
}
}
}