.image__slider { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; border-radius: 16px; } .swiper-slide { width: 536px; } .button__arrow_l { cursor: pointer; background-image: url(./Arrow_Left.svg); background-repeat: no-repeat; background-position: center; height: 14px; width: 22px; } .button__arrow_r { -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -ms-transform: matrix(-1, 0, 0, 1, 0, 0); transform: matrix(-1, 0, 0, 1, 0, 0); cursor: pointer; background-image: url(./Arrow_Left.svg); background-repeat: no-repeat; background-position: center; height: 14px; width: 22px; } .image__slider_active { width: 100%; height: 100%; object-fit: cover; opacity: 1; border-radius: 16px; } .button__container { width: 536px; margin-top: 45px; display: flex; flex-direction: row; justify-content: space-between; gap: 304px } .slider__info { display: flex; flex-direction: row; justify-content: center; } .swiper__caption { white-space: nowrap; margin: 0; font-style: normal; font-weight: 500; font-size: 14px; line-height: 150%; /* identical to box height, or 21px */ letter-spacing: 0.02em; /* Landing/White */ color: #ebebeb; } .container { display: flex; flex-direction: row; gap: 18px; align-items: center; } .button { width: 22px; height: 14px; cursor: pointer; } .container1 { font-style: normal; font-weight: 500; font-size: 14px; line-height: 150%; /* identical to box height, or 21px */ letter-spacing: 0.02em; text-transform: uppercase; /* Landing/White */ color: #ebebeb; display: flex; color: #F2F2F2 !important; } .swiper__caption { margin: 0; color: #888888; text-align: center; } .pagination__container { display: grid; grid-template-columns: 120px auto; gap: 16px; } .swiper-slide { width: 536px } @media screen and (min-width: 1600px) { .button__container { width: 640px; } .container { gap: 22px; } .swiper__caption { font-size: 17px; } .container1 { font-size: 17px; } .pagination__container { grid-template-columns: 145px auto; } } @media screen and (max-width: 1024px) { .slider__info { display: block; } .button__container { margin-left: 9px; margin-right: 29px; } .button__container { gap: 0; } .swiper-wrapper {} .swiper-wrapper_image { padding-left: 20px; box-sizing: border-box; } } @media screen and (max-width: 990px) { .swiper-container { padding-left: 20px; } } @media screen and (max-width: 639px) { .swiper-container { padding-left: 10px; } .button__container { gap: 0; } .button__container { width: 94%; margin-left: 9px; margin-right: 19px; } .swiper-wrapper_image { padding-left: 10px; box-sizing: border-box; } }