/*
/* GRID SYSTEM
/* ========================================== */
	
	.grid{
		display: grid;
		grid-gap: 20px;
		
	}

	.nav-grid{
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(100px, auto);
	}
	.nav-grid .grid-item {
		border-right: 1px dotted rgb(241 241 241 / 33%);
		padding-right: 15px;
	}
	.nav-grid  .grid-item:last-child{
		border-right: 0px;
	}

	.hm-grid .grid{ grid-template-columns: repeat(2, 1fr); }
	
	.fgrs-grid{ grid-template-columns: repeat(4, 1fr);}

	.hm-grid .grid-item{
		cursor: pointer;
		-webkit-transition:  all 0.3s ease-in-out;
	 		-moz-transition: all 0.3s ease-in-out;
	 			transition:  all 0.3s ease-in-out;
	}
	
	.hm-grid .grid-item,
	.fgrs-grid .grid-item{
		background: rgb(242 242 242);
		box-shadow: 0px 0px 5px rgb(0 0 0 / 10%);
		padding: 15px;
	}

	.hm-grid .grid-item:nth-child(odd),
	.fgrs-grid .grid-item:nth-child(odd){ 
		background: rgb(255 255 255);
	}
	

	.col-grid{
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(160px, auto);
	}

	.col-grid .grid-item{
		border: 1px solid rgb(242 242 242);
		border-radius: 3px;
		padding: 15px;
	}

	.nbs-evnt .grid{
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: minmax(150px, auto);
	}
	

	@media only screen and (min-width: 768px){

		.fgrs-grid{ grid-template-columns: repeat(3, 1fr);}
		.nbs-evnt .grid{ grid-template-columns: repeat(3, 1fr); }
	}


	@media only screen and (min-width: 992px){

		.fgrs-grid{ grid-template-columns: repeat(4, 1fr); }
		.nbs-evnt .grid{ grid-template-columns: repeat(3, 1fr); }
	}

	@media only screen and (max-width: 767.98px){
		.nav-grid	{ grid-template-columns: repeat(2, 1fr); }
		.fgrs-grid	{ grid-template-columns: repeat(2, 1fr); }

		.nbs-evnt .grid{ grid-template-columns: repeat(2, 1fr); }

		.nav-grid .grid-item{
			border-bottom: 1px dotted rgb(241 241 241 / 33%);
			border-right: 0px;
		}
	}


	@media only screen and (max-width: 467.98px){
		
		.hm-grid   { grid-template-columns: repeat(1, 1fr); }
		.fgrs-grid { grid-template-columns: repeat(1, 1fr); }
		.col-grid  { grid-template-columns: repeat(1, 1fr); }
		.nbs-evnt .grid{ grid-template-columns: repeat(1, 1fr); }

		.nbs-evnt .grid-item{
			margin-bottom: 30px;
		}
		.nav-grid .grid-item{
			border-bottom: 1px dotted rgb(241 241 241 / 33%);
			border-right: 0px;
		}
	}


	@media only screen and (max-width: 367.98px){
		.nav-grid{ grid-template-columns: repeat(1, 1fr); }
	}