Как избежать обрезания изображения выходящего из блока?

Сергей delphinpro, это вам не кружок рисования. Я нахожусь на стадии обучения и ищу ответы на свои вопросы тут.

Как избежать обрезания изображения выходящего из блока?

Машка, нет, на изображении облако не обрезаны. Bacground-size помогает, но нужно чтоб изображение выходило за пределы блока. Такое возможно только через позиционирование? Изображение, как я понял, и так и эдак будет обрезаться.

Если на макете( PSD) большая высота строки, задавать высоту строки как указано в макете или отодвигать отступами?

Ankhena, нет)

Почему slick слайдер не хочет становиться по центру и растягивает блоки при указанной ширине?

Danny Arty, посмотрите, пожалуйста, в чем может быть проблема? Почему нижний блок растягивает на всю ширину слайдера?

Почему slick слайдер не хочет становиться по центру и растягивает блоки при указанной ширине?

Ankhena, тут похоже какая-то проблема в нижнем блоке. Когда в настройках слайдера ставлю slide-show:1 почему-то растягивается нижний блок на всю ширину слайдера.

Почему slick слайдер не хочет становиться по центру и растягивает блоки при указанной ширине?

Danny Arty, первый слайд(на скрине). Растягивается нижний блок на половину ширины слайдера.

Почему slick слайдер не хочет становиться по центру и растягивает блоки при указанной ширине?

Ankhena, пока еще учусь. Думал, что можно решить проблему не меняя слик на свайпер.

Почему slick слайдер не хочет становиться по центру и растягивает блоки при указанной ширине?

Danny Arty, вот ссылка на кодпен. https://codepen.io/uflfssbg-the-decoder/pen/KKrmLOg

Почему slick слайдер не хочет становиться по центру и растягивает блоки при указанной ширине?

Сергей delphinpro, Возражу. Вопрос другой. Проблема другая.

Почему слик слайдер растягивает блоки?

Вот код, если поможет.
HTML

<section id="team" class="team">
        <div class="container">
            <div class="team__inner">
                <p class="team__subtitle plum">
                    В нашем штате 37 сотрудников
                </p>
                <h2 class="team__title title">
                    Мы большая команда профессионалов
                </h2>
            </div>
            <div class="slider">
                <div class="slick-slide">
                    <img class="team__block-img" src="images/Man-1.jpg" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="images/Man-2.jpg" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="images/Man-3.jpg" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="images/Man-4.jpg" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slick-slide">
                    <img class="team__block-img" src="images/Man-5.jpg" alt="">
                    <div class="team__block-info">
                        <div class="name">
                            <h3 class="team__block-title name-title">
                                Александр Федулов
                            </h3>
                            <p class="team__block-text">
                                Ремонтник
                            </p>
                        </div>
                        <div class="expiriens">
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">398 ремонтных работ</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">3 года в Fixper</p>
                            </div>
                            <div class="expiriens__item">
                                <img class="expiriens__item-img" src="images/check.svg" alt="">
                                <p class="expiriens__item-text plum">Рейтинг Fixper 4,5</p>
                            </div>
                        </div>
                    </div>
                </div>
                
    </section>

CSS

.team {
    padding-top: 100px;
    padding-bottom: 163px;
    background: linear-gradient(0deg, #FAFAFA, #FAFAFA), #FAE6F5;
}

.team__inner {
    text-align: center;
    margin-bottom: 50px;
}

.team__subtitle {
    margin-bottom: 10px;

}

.slick-slide {

    border-radius: 0px 0px 15px 15px;
    margin-right: 30px;
}



.team__block-info {
    padding-left: 45px;
    padding-bottom: 50px;
    background-color: #fff;

}

.team__block-title {
    margin-bottom: 8px;
}

.name {
    padding-top: 50px;
    margin-bottom: 25px;
    color: #000000;

}

.name-title {
    font-size: 24px;
    line-height: 28px;
    color: #000;
}



.expiriens__item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.expiriens__item:last-child {
    margin-bottom: 0px;
}

.expiriens__item-img {
    margin-right: 12px;
}

.slick-next__img {
    padding-left: 15px;
}

*CSS слайдера в описании вопроса.

Почему слик слайдер растягивает блоки?

Сергей delphinpro, когда меняю ширину слайдера происходит следующее.

Почему обрезается изображение при указанной ширине и высоте?

imko, Отредактировано

Почему обрезается изображение при указанной ширине и высоте?

Stalker_RED, Отредактировано

Span разбивает текст на две части. Возможно ли это исправить.?

Danny Arty, Да, действительно. Делалось для того, чтоб псевдоэлемент(картинка кружочка) стал возле текста.

Как поменять местами элементы таким образом? Такое возможно без js?

То-есть следует прописать display: grid контейнеру хедера, при мобильной ширине? А при обычной ширине можно оставить flex?

Как поменять местами элементы таким образом? Такое возможно без js?

Anonymous, Потому-что решил пока остановиться на оттачивании навыков в html и css. Js считаю еще рано, слишком перегруженно получится.

Когда мы делаем адаптив сайту, нужно делать адаптив для планшетов начиная от указанной ширины в МАКЕТЕ или приблизительной ширины планшетов?

То есть если по задумке автора на ширине 768 пикселей сайт должен выглядеть определенным образом, то мы делаем именно на 768 по задумке автора, а то что больше уже по своему усмотрению?

Как задать плавное исчезновение блока в этом js коде?

Помогло следующее. Это как-то принципиально меняет ситуацию?

$('.header__bottom-img').on('click', function(){
        $('.header__bottom').fadeOut(600); 
    })