.cards__list { display: grid; grid-template-columns: repeat(4, 1fr); } .cards__item { position: relative; } @media (max-width: 991.98px) { .cards__item { max-width: 270px; } } .cards__img { margin-bottom: 5px; } @media (min-width: 1720px) { .cards__img { width: 100%; margin-bottom: 15px; } } @media (max-width: 991.98px) { .cards__img { margin-bottom: 8px; } } .cards__img:hover { scale: 1.05; transition: scale 0.15s linear; } .cards__desc { font-weight: 500; line-height: 22px; } @media (min-width: 1720px) { .cards__desc { font-size: 20px; line-height: 26px; padding-left: 20px; padding-right: 20px; } } @media (max-width: 1279.98px) { .cards__desc { padding-left: 5px; padding-right: 5px; margin-bottom: 3px; } } @media (max-width: 991.98px) { .cards__desc { padding-left: 8px; padding-right: 8px; } } .cards__desc a { color: var(--color-orange); } .cards__arrow { width: 62px; height: 20px; position: absolute; right: -30px; top: -21px; background-image: url("/static/img/svg/Arrow23.svg"); } @media (min-width: 1720px) { .cards__arrow { right: -45px; top: -29px; } } @media (max-width: 1304.98px) { .cards__arrow { top: -8%; } } @media (max-width: 991.98px) { .cards__arrow { display: none; } } .cards .slick-list { overflow: visible; } .slick-dots { display: flex; justify-content: center; margin: 0; padding: 1rem 0; list-style-type: none; } .slick-dots li { margin: 0 0.25rem; } .slick-dots button { display: block; width: 8px; height: 8px; padding: 0; border: none; border-radius: 100%; background-color: #D9D9D9; text-indent: -9999px; } .slick-dots li.slick-active button { background-color: var(--color-orange); }