.feature-grid{
	overflow-x:hidden;
	overflow-y:auto;
	display: flex;
	margin:15px 0;
}

.feature-grid:hover .group{
	animation-play-state: paused;
}

@keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
.feature-grid .group{
	display: flex;
    gap: 20px;
    padding-right: 20px;
	will-change: transform;
	animation: scrolling 100s linear infinite;
}

 .feature-grid.alt .group{
	animation-duration:80s;
}

.feature-grid .group>div{
	text-wrap: nowrap;
	border:solid 1px #dee7f1;
	padding:7px 14px;
	color:#526487;
	border-radius:5px;
	justify-content: center;
	text-align:center;
	transition:0.2s;
	cursor:default;
}

.feature-grid .group>div:hover{
	border-color:rgb(var(--theme));
}
.feature-grid.reverse .group{
	animation-direction: reverse;
}
.feature-grid-hover{
	overflow-x:hidden;
	position:relative;
}
#feature-grid-hover{
	z-index:10;
	position:absolute;
	width:200px;
	background-color:#FFF;
	border:solid 1px #dee7f1;
	padding:16px;
	border-radius:5px;
	transition:0.2s;
	opacity:0;
	pointer-events:none;
	box-sizing:border-box;
}
#feature-grid-hover.active{
	opacity:1;
}

#feature-grid-hover>p{margin:0;}

@media screen and (max-width: 1920px){
	.feature-grid .group{
		 animation-duration:80s;
	 }
	.feature-grid.alt .group{
		animation-duration:70s;
	}
}
@media screen and (max-width: 750px){
	 .feature-grid .group{
		 animation-duration:60s;
	 }
	 .feature-grid.alt .group{
		animation-duration:50s;
	}
}