.carouselWrap{margin:104px 0 72px 0} .carousel{position:relative;padding:0;overflow:hidden} .carouselOverflow{padding:0 0 20px calc((100% - 1240px)/ 2);overflow-x:scroll;position:relative;top:20px} .carouselOverflow .carouselContent{display:grid;grid-auto-columns:calc((1240px / 3) - 16px);grid-auto-flow:column;grid-gap:24px} .carouselOverflow .carouselContent::after{content:'';width:calc(((100vw - 1240px)/ 2) - 24px)} .carouselOverflow .news-item{margin:0;width:100%} .carousel::after,.carousel::before{content:'';width:calc((100vw - 1240px)/ 4);height:100%;position:absolute;top:0;z-index:3;pointer-events:none} .carousel::after{left:0;background:-moz-linear-gradient(left,rgba(236,240,240,1) 0,rgba(236,240,240,0) 100%);background:-webkit-linear-gradient(left,rgba(236,240,240,1) 0,rgba(236,240,240,0) 100%);background:linear-gradient(to right,rgba(236,240,240,1) 0,rgba(236,240,240,0) 100%)} .carousel::before{right:0;background:-moz-linear-gradient(left,rgba(236,240,240,0) 0,rgba(236,240,240,1) 100%);background:-webkit-linear-gradient(left,rgba(236,240,240,0) 0,rgba(236,240,240,1) 100%);background:linear-gradient(to right,rgba(236,240,240,0) 0,rgba(236,240,240,1) 100%)} .carousel .arrow{position:absolute;top:calc(50% - 40px);width:120px;height:80px;background:#fff;color:#00829b;z-index:4;box-shadow:0 0 20px rgba(15,60,60,.2);cursor:pointer;transition:all .2s} .carousel .arrow.prev{left:-40px;border-radius:0 80px 80px 0} .carousel .arrow:hover{height:96px;top:calc(50% - 48px)} .carousel .arrow.prev:hover{left:-32px} .carousel .arrow.next:hover{right:-32px} .carousel .arrow.prev:hover:active{left:-28px} .carousel .arrow.next:hover:active{right:-28px} .carousel .arrow.next{right:-40px;border-radius:80px 0 0 80px} .carousel .arrow::before{font-family:"Font Awesome 5 Pro";font-size:24px;line-height:1;font-weight:700;position:absolute;top:calc(50% - 11px)} .carousel .arrow.prev::before{content:"\f053";right:36px} .carousel .arrow.next::before{content:"\f054";left:36px} .carousel .arrow.disabled{opacity:0;cursor:default} @media screen and (max-width:1440px){ .carouselOverflow{padding-left:calc((100vw - 1128px)/ 2)} .carouselOverflow .carouselContent{grid-auto-columns:calc((1128px / 3) - 16px)} .carouselOverflow .carouselContent::after{width:calc(((100vw - 1128px)/ 2) - 24px)} .carousel::after,.carousel::before{width:calc((100vw - 1128px)/ 4)} } @media screen and (max-width:1336px){ .carouselOverflow{padding-left:calc((100vw - 1096px)/ 2)} .carouselOverflow .carouselContent{grid-auto-columns:calc((1096px / 3) - 16px)} .carouselOverflow .carouselContent::after{width:calc(((100vw - 1096px)/ 2) - 24px)} .carousel::after,.carousel::before{width:calc((100vw - 1096px)/ 4)} } @media screen and (max-width:1200px){ .carouselOverflow{padding-left:40px} .carouselOverflow .carouselContent{grid-auto-columns:calc(50vw - 72px)} .carouselOverflow .carouselContent::after{width:16px} .carousel::after,.carousel::before{display:none} } @media screen and (max-width:800px){ .carouselOverflow{padding-left:24px} .carouselOverflow .carouselContent{grid-auto-columns:400px} .carouselOverflow .carouselContent::after{width:1px} .carousel .arrow{display:none} } @media screen and (max-width:500px){ .carouselOverflow .carouselContent{grid-auto-columns:calc(100vw - 64px)} }