Всем привет. Контент страницы обернут в контейнер с паддингами. Есть секция, которая должна вылезать за пределы контейнера (слайдер с карточками, слева и справа должны отображаться половинки карточек) Как лучше сверстать подобное?

Ребят, всем привет. Вставил svg через object вот так:

        <a href="#" class="footer__social-link">
          <object type="image/svg+xml" data="/assets/template/images/icon-vk.svg">
            <img src="/assets/template/images/icon-vk.svg" alt="vk"/>
          </object>
        </a>

При наведении она должна становиться розовой. Я почитал, для этого надо написать стили в самом файле svg. Я написал. Но при наведении почему-то розовой она не становится. Вот сам файл svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="17.84" height="10.06" viewBox="0 0 17.84 10.06">
  <defs>
  <style>
    .icon-svg {
    fill-rule: evenodd;
    fill: #000000;
    }
    .footer__social-link:hover .icon-svg {
    fill: #ee4d83;
    }
  </style>
  </defs>
  <path d="M17.107,8.159 C16.575,7.523 15.950,6.980 15.358,6.402 C14.824,5.882 14.791,5.581 15.220,4.980 C15.688,4.325 16.192,3.695 16.664,3.044 C17.105,2.434 17.557,1.827 17.789,1.097 C17.936,0.632 17.806,0.427 17.329,0.346 C17.247,0.331 17.162,0.331 17.078,0.331 L14.250,0.328 C13.902,0.323 13.709,0.474 13.586,0.783 C13.420,1.200 13.248,1.616 13.050,2.018 C12.601,2.930 12.099,3.811 11.395,4.557 C11.240,4.722 11.068,4.930 10.809,4.844 C10.484,4.725 10.389,4.192 10.394,4.011 L10.391,0.752 C10.328,0.286 10.225,0.079 9.762,-0.012 L6.824,-0.011 C6.432,-0.011 6.235,0.140 6.026,0.385 C5.905,0.526 5.869,0.618 6.117,0.665 C6.605,0.758 6.879,1.073 6.952,1.560 C7.069,2.341 7.061,3.125 6.994,3.907 C6.974,4.136 6.934,4.364 6.844,4.578 C6.702,4.913 6.472,4.981 6.171,4.775 C5.898,4.588 5.706,4.324 5.519,4.060 C4.814,3.065 4.252,1.993 3.794,0.867 C3.661,0.541 3.433,0.344 3.088,0.338 C2.239,0.325 1.390,0.323 0.542,0.339 C0.031,0.349 -0.121,0.596 0.087,1.058 C1.011,3.111 2.040,5.107 3.383,6.925 C4.072,7.858 4.864,8.681 5.886,9.266 C7.045,9.927 8.292,10.127 9.606,10.065 C10.221,10.036 10.406,9.876 10.435,9.264 C10.454,8.844 10.502,8.429 10.708,8.052 C10.911,7.682 11.219,7.612 11.574,7.842 C11.751,7.958 11.900,8.104 12.042,8.258 C12.388,8.636 12.722,9.026 13.081,9.392 C13.532,9.850 14.066,10.121 14.738,10.065 L17.337,10.065 C17.756,10.039 17.973,9.525 17.733,9.059 C17.564,8.732 17.342,8.441 17.107,8.159 Z" class="icon-svg"/>
</svg>

В чем проблема?

        <a href="#" class="footer__social-link">
          <object type="image/svg+xml" data="/assets/template/images/icon-vk.svg">
            <img src="/assets/template/images/icon-vk.svg" alt="vk"/>
          </object>
        </a>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="17.84" height="10.06" viewBox="0 0 17.84 10.06">
  <defs>
  <style>
    .icon-svg {
    fill-rule: evenodd;
    fill: #000000;
    }
    .footer__social-link:hover .icon-svg {
    fill: #ee4d83;
    }
  </style>
  </defs>
  <path d="M17.107,8.159 C16.575,7.523 15.950,6.980 15.358,6.402 C14.824,5.882 14.791,5.581 15.220,4.980 C15.688,4.325 16.192,3.695 16.664,3.044 C17.105,2.434 17.557,1.827 17.789,1.097 C17.936,0.632 17.806,0.427 17.329,0.346 C17.247,0.331 17.162,0.331 17.078,0.331 L14.250,0.328 C13.902,0.323 13.709,0.474 13.586,0.783 C13.420,1.200 13.248,1.616 13.050,2.018 C12.601,2.930 12.099,3.811 11.395,4.557 C11.240,4.722 11.068,4.930 10.809,4.844 C10.484,4.725 10.389,4.192 10.394,4.011 L10.391,0.752 C10.328,0.286 10.225,0.079 9.762,-0.012 L6.824,-0.011 C6.432,-0.011 6.235,0.140 6.026,0.385 C5.905,0.526 5.869,0.618 6.117,0.665 C6.605,0.758 6.879,1.073 6.952,1.560 C7.069,2.341 7.061,3.125 6.994,3.907 C6.974,4.136 6.934,4.364 6.844,4.578 C6.702,4.913 6.472,4.981 6.171,4.775 C5.898,4.588 5.706,4.324 5.519,4.060 C4.814,3.065 4.252,1.993 3.794,0.867 C3.661,0.541 3.433,0.344 3.088,0.338 C2.239,0.325 1.390,0.323 0.542,0.339 C0.031,0.349 -0.121,0.596 0.087,1.058 C1.011,3.111 2.040,5.107 3.383,6.925 C4.072,7.858 4.864,8.681 5.886,9.266 C7.045,9.927 8.292,10.127 9.606,10.065 C10.221,10.036 10.406,9.876 10.435,9.264 C10.454,8.844 10.502,8.429 10.708,8.052 C10.911,7.682 11.219,7.612 11.574,7.842 C11.751,7.958 11.900,8.104 12.042,8.258 C12.388,8.636 12.722,9.026 13.081,9.392 C13.532,9.850 14.066,10.121 14.738,10.065 L17.337,10.065 C17.756,10.039 17.973,9.525 17.733,9.059 C17.564,8.732 17.342,8.441 17.107,8.159 Z" class="icon-svg"/>
</svg>

Вставь svg кодом, без img

Я не хочу, она кешироваться не будет. И испортит код - слишком много кода в html будет.

У swiper есть такой режим, половинки карточек по краям

Гляну, спасибо)

Есть js либы, которые будут за тебя это делать

В смысле img заменять на svg кодом

Подскажи, гляну на будущее.

Но хотелось бы получить ответ, пока я сам вручную все вставляю.

Аналогов тоже полно, это лишь пример

Спасибо

Есть флекс элемент, в котором размещена форма. Чем форму можно позиционировать по горизонтали? Существует что-то типа text-align для flex элементов? Не для ряда flex элементов, а в одном выравнять содержимое по горизонтали

justify-content: center контейнеру

У меня в строке два флекса на всю ширину экрана. В одном флексе нужно прижать содержимое к левому краю, в другом  - к правому. justify-content: center  для контейнера будет же одинаково центровать содержимое в обоих флекс элементах?

отдельно стилизуй каждый элемент. Там где выравниваешь влево - justify-content: flex-start, вправо - flex-end

В песочнице на простом примере работает, спасибо. А в готовом коде нет. Что-то намудрил с размерами и отступами..

Так ты кидай нам пример, йоу.

в каком виде?