:root {
    --accent: #8EA64D;
    --white: #ffffff;
    --grey: #F5F5F5;
    --bg-body: #F5F5F5;
    --bg-block: #ffffff;
    --txt: #333333;

    --gap: 2.857vw;
    --btn-h: 4.285vw;
    --btn-fs: 1.142vw;

    --txt-fs: 1vw;
    --h1: 3.25vw;
    --h2: 2vw;
    --txt-sm: .825vw;

    --card-br: 0.71vw;

    --card-pad: 2.14vw;
}
@media (max-width: 850px) {
    :root {
        --btn-h: 9.375vw;
        --btn-fs: 2.5vw;
        --gap: 5.46vw;
        --card-br: 1.71vw;
        --card-pad: 2.687vw;
        --txt-fs: 2.2vw;
        --h1: 3.5vw;
        --h2: 3.625vw;
        --txt-sm: 1.825vw;
    }
}
@media (max-width: 500px) {
    :root {
        --btn-h: 17.14vw;
        --btn-fs: 4.57vw;
        --gap: 5vw;
        --card-br: 3vw;
        --card-pad: 3vw;
        --txt-fs: 4.25vw;
        --h1: 7.25vw;
        --h2: 5.625vw;
        --txt-sm: 3.595vw;
    }
}
* {
    box-sizing: border-box;
    font-weight: 400;
}
body {
    background-color: var(--bg-body);
}

footer {
    background-color: var(--bg-block);
}
.d-grid {
    display: grid;
}
.grid-cols-1 {
    grid-template-columns: 1fr;
}
.page-wrapper {
    grid-template-columns: 4fr minmax(1px, 8fr);
    gap: var(--gap);
}
.constructor_person_page > * {
    margin-bottom: var(--gap);
}
.doctor-block {
    background-color: var(--bg-block);
    padding: var(--card-pad);
    border-radius: var(--card-br);
    font-family: 'Jost', Arial, sans-serif;
    font-weight: 400;
}
.doctor-block h2 {
    color: var(--accent);
    font-size: var(--h2);
    margin-bottom: .75em;
}
.button-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-h);
    font-size: var(--btn-fs);
    border-radius: 10vw;
    gap: .5em;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    border: none;
    padding-left: 1.5em;
}
.button-main.accent {
    background-color: var(--accent);
    color: var(--white);
}
.button-main.accent > span.icon {
    background-color: var(--white);
    color: var(--accent);
    border-radius: 100%;
    width: calc(var(--btn-h) - 1.25em);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5em;
    aspect-ratio: 1 / 1;
}
.button-main.accent > span.icon svg {
    width: 40%;
    height: auto;
}
.button-main.mobile {
    display: none;
}
.button-main--small {
    font-size: var(--txt-sm);
    border-radius: 10vw;
    background-color: #F4F7EE;
    color: var(--accent);
    border: none;
    padding: 1em 1.5em;
}
.label {
    font-size: var(--txt-fs);
    padding: .875em 1.5em;
    border-radius: .75em;
    background-color: var(--grey);
    color: var(--txt);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}
.ratio {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.ratio.ratio-1-1 {
    padding-top: 100%;
}
.ratio img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -o-object-position: center;
       object-position: center;
}
.ratio img.cover {
    -o-object-fit: cover;
       object-fit: cover;
}

.doctor-profile {
    grid-template-columns: 4fr 8fr;
    gap: var(--gap);
    margin: var(--gap) 0;
	box-shadow: 0vw 0vw 2vw 0 rgba(0, 0, 0, 0.06);
}

.doctor-profile .ratio {
    border-radius: var(--card-br);
}

.doctor-profile .content {
    display: grid;
    grid-auto-columns: 1fr;
    gap: inherit;
    align-content: center;
}

.doctor-profile h1 {
    font-size: var(--h1);
    line-height: 1.5;
    color: var(--txt);
}
.page-wrapper aside {
    margin-bottom: var(--gap);
}
.aside_scroll_nav {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--header-height) + 1.1vw);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) / 6);
}
.aside_scroll_nav > * {
    display: inline-flex;
    gap: .5em;
    border-radius: .875em;
    font-size: var(--txt-fs);
    padding: 1em 1.5em;
    width: 100%;
    background-color: var(--white);
    color: var(--accent);
    transition: all .2s ease;
}
.aside_scroll_nav a span:last-child {
    color: #8C8C8C;
}
.aside_scroll_nav *:hover,
.aside_scroll_nav *.active {
    background-color: var(--accent);
    color: var(--white);
}
.aside_scroll_nav a:hover span:last-child,
.aside_scroll_nav a.active span:last-child {
    color: var(--white);
}

@media (max-width: 850px) {
    .page-wrapper {
        --container-x: 1.5625vw;
        grid-template-columns: minmax(1rem, 1fr);
    }
    .page-wrapper aside {
        overflow: hidden;
        margin: 0 calc(-1 * var(--container-x));
    }
    .aside_scroll_nav {
        position: static;
        top: auto;
        flex-wrap: nowrap;
        flex-direction: row;
        overflow-x: scroll;
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
        scroll-padding: 0 var(--container-x);
        padding: 0 var(--container-x);
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        gap: calc(var(--gap) / 4);
    }
    .aside_scroll_nav > * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        scroll-snap-align: start;
        border-radius: 10rem;
    }
    .aside_scroll_nav > * > span:not(.nav-icon) {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }
}
@media (max-width: 500px) {
    .page-wrapper {
        --container-x: 2.857vw;
    }
    .doctor-profile {
        grid-template-columns: 1fr;
		border-radius: var(--card-br) var(--card-br) 10vw 10vw;
		box-shadow: 0vw 0vw 4vw 0 rgba(0, 0, 0, 0.06);
    }
    .doctor-profile h1 {
        text-align: center;
    }
    .doctor-profile .button-main {
        width: 100%;
        justify-content: space-between;
    }
    .button-main.mobile {
        display: inline-flex;
    }
    .aside_scroll_nav {
        gap: calc(var(--gap) / 2);
    }
}