How to properly adapt slick slider?

Question

css

It is necessary that when the screen width decreases, the distance between the slider elements of 30px is preserved, the elements decrease proportionally. In this case, the initial dimensions should be 330x330. If you do not set fixed sizes, the elements immediately decrease in content.

<section class="goods">
    <div class="container">
      <div class="goods__inner">
        <div class="goods__title">Популярные товары
        </div>
        <div class="goods__cards">
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
          <div class="cards__card">
            <div class="card__inner">
              <div class="card__picture">
                <img src="https://so-wiki.ru/w/images/thumb/e/e0/Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png/250px-Icon_%D0%9A%D0%BE%D1%80%D0%BE%D0%B1%D0%BA%D0%B0_%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F.png" alt="">
              </div>
              <div class="card__title">Box</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

.goods {
    margin-top: 100px;
}
.container {
    max-width: 1410px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}
.goods__inner {
    position: relative;
}
.goods__title {
    font-size: 30px;
    color: #333333;
}
.goods__cards {
}
.cards__card {
    margin: 0 15px;
}
.card__inner {
}
.card__picture {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    width: 330px;
    height: 330px;
    position: relative;
    img {
        max-width: 100%;
        max-height: auto;
    }
}

$('.goods__cards').slick({
  slidesToShow: 4,
});

Answer 1

width: calc((330 * 100) / 1920) * 1vw);
height: calc((330 * 100) / 1920) * 1vw);
where:
330 - block width
1920 - screen width on which you are making an adaptive.
You need to try with calc (), I do it through scss, using mixes.