.cards__list { display: grid; grid-template-columns: repeat(4, 1fr); } .cards__item { position: relative; } @media (max-width: 991.98px) { .cards__item { max-width: 270px; } } @media (max-width: 767.98px) { .cards__item { max-width: 251px; margin-right: 18px; } } .slick-active .cards__item .cards__desc, .cards__item:hover .cards__desc, .cards__item:focus .cards__desc { -webkit-line-clamp: initial; /* number of lines to show */ line-clamp: initial; max-height: 17em; } .cards__img { margin-bottom: 5px; } @media (min-width: 1720px) { .cards__img { width: 100%; margin-bottom: 15px; } } @media (max-width: 1304.98px) { .cards__img { margin-bottom: 8px; } } @media (max-width: 991.98px) { .cards__img { margin-bottom: 8px; } } @media (max-width: 767.98px) { .cards__img { margin-bottom: 10px; } } .cards__img:hover { scale: 1.05; transition: scale 0.15s linear; } .cards__desc { font-weight: 500; line-height: 22px; padding: 0 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; /* number of lines to show */ line-clamp: 7; -webkit-box-orient: vertical; transition: all 0.3s ease-in-out; max-height: 10em; } @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; } } .slick-active .cards__desc, .cards__desc:hover, .cards__desc:focus { -webkit-line-clamp: initial; /* number of lines to show */ line-clamp: initial; max-height: 999em; } .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; } @media (max-width: 767.98px) { .cards .slick-list { margin-bottom: 1px; padding-left: 58px; } } .cards .slick-dots { display: flex; justify-content: center; margin: 0; padding: 1rem 0; list-style-type: none; } .cards .slick-dots li { margin: 0 0.25rem; } @media (max-width: 767.98px) { .cards .slick-dots li { margin: 0 0.31rem; } } .cards .slick-dots button { display: block; width: 8px; height: 8px; padding: 0; border: none; border-radius: 100%; background-color: #D9D9D9; text-indent: -9999px; } .cards .slick-dots li.slick-active button { background-color: var(--color-orange); } .cards--cstmr .cards__desc { padding: 0 50px; } @media (max-width: 1304.98px) { .cards--cstmr .cards__desc { padding-left: 10px; padding-right: 10px; } }