.pagination\:container {
  display: flex;
  align-items: center;
}

.arrow\:text {
  display: block;
  vertical-align: middle;
  font-size: 13px;
  vertical-align: middle;
  color:#FFF;
}

.pagination\:number {
  --size: 32px;
  --margin: 6px;
  margin: 0 var(--margin);
  border-radius: 6px;
  background: #7d90c2;
  max-width: auto;
  min-width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 6px;
    color:#FFF;
  @media (hover: hover) {
    &:hover {
      background: lighten(#202020, 3%);
    }
  }
  &:active {
      background: lighten(#202020, 3%);
  }
}

.pagination\:active {
  background: lighten(#202020, 3%);
  position: relative;
  background: #576b9e;
}

@media only screen and (max-width: 674px) {
	.pagination\:number {
		--size: 38px;
		--margin: 3px;
		padding: 0 0;
	}
	
	.pagination\:active {
	  background: lighten(#202020, 3%);
	  background: #313e5f;
	  font-size: 20px;
	}
}

@media only screen and (max-width: 530px) {
	.pagination\:number {
		--size: 30px;
		--margin: 3px;
		padding: 0 0;
	}
	
	.pagination\:active {
	  background: lighten(#202020, 3%);
	  background: #313e5f;
	  font-size: 16px;
	}
}

@media only screen and (max-width: 459px) {
	.pagination\:number {
		--size: 25px;
		--margin: 3px;
		padding: 0 0;
	}
	
	.pagination\:active {
	  background: lighten(#202020, 3%);
	  background: #313e5f;
	  font-size: 15px;
	}
}

@media only screen and (max-width: 374px) {
	.pagination\:number {
		--size: 20px;
		--margin: 3px;
		padding: 0 0;
	}
	
	.pagination\:active {
	  background: lighten(#202020, 3%);
	  background: #313e5f;
	  font-size: 14px;
	}
}