/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.about__info{
    margin-bottom: var(--space-24);
}
.about__title{
    margin-bottom: var(--space-10);
}
.about__back{
    margin-bottom: var(--space-10);
}
.about__content{
    font-weight: 400;
    font-size: var(--text-lead);
}
.about__images{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.about__images-small{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
@media (max-width: 1395px) {
    .about__images{
        -webkit-column-gap: var(--space-16);
           -moz-column-gap: var(--space-16);
                column-gap: var(--space-16);
    }
}
@media (max-width: 1300px) {
    .header__logo-image{
        width: clamp(7.5rem, 6.153rem + 6.73vw, 11.625rem);
    }
    .header__menu-link,
    .header__phone,
    .menu__phone,
    .footer__list-link,
    .footer__list-title,
    .footer__list-copyright{
        font-size: var(--text-ui);
    }
    .header__menu-list{
        -webkit-column-gap: clamp(1.563rem, -5.394rem + 10.87vw, 3.438rem);
           -moz-column-gap: clamp(1.563rem, -5.394rem + 10.87vw, 3.438rem);
                column-gap: clamp(1.563rem, -5.394rem + 10.87vw, 3.438rem);
    }
    .title,
    .about__title{
        font-size: var(--text-h2);
    }
    .about__back,
    .about__content{
        font-size: var(--text-lead);
    }
    .contact__element-link{
        font-size: var(--text-lead);
    }
}
@media (max-width: 1200px){
    .about__images{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        row-gap: var(--space-16);
    }
    .about__image-item{
        width:100%;
        height: 436px;
    }
    .about__images-small{
        display: none;
    }
}
@media (max-width: 1100px){
    .header__phone{
        display: none;
    }
}
@media (max-width: 868px) {
    .header__menu-list,
    .header__menu{
        display: none;
    }
    .about__image{
        min-width: 200px;
    }
    .footer__list{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        row-gap: var(--space-20);
    }
    .footer__sublist-item {
        padding-bottom: var(--space-4);
    }

}
@media (max-width: 652px) {
    .about__images{
        display: none;
    }
}
/* ---------------------------------------------------------------------------
   ТЕКСТ СТРАНИЦЫ «О КОМПАНИИ»
   Раньше весь блок был одним <p>, а список услуг и абзацы изображались
   цепочками <br>. Теперь это настоящие заголовки, абзацы и список — так
   страницу читают и человек, и поисковик.
   --------------------------------------------------------------------------- */
.about__content > p {
    margin-bottom: var(--space-6);
}
.about__subtitle {
    font-size: var(--text-h3);
    font-weight: 600;
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
}
.about__list {
    list-style: none;
    margin-bottom: var(--space-6);
}
.about__list-item {
    position: relative;
    padding-left: var(--space-8);
    margin-bottom: var(--space-4);
}
.about__list-item::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-red);
}
/* Ссылка внутри текста должна читаться как ссылка, а не как обычное слово */
.about__list-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    -webkit-transition: color var(--transition-duration);
    -o-transition: color var(--transition-duration);
    transition: color var(--transition-duration);
}
.about__list-link:hover {
    color: var(--color-red);
}