index.scss

#content {
	padding-left: 2rem;
	padding-right: 2rem;
	max-width: initial;
}

.tutorial_container{
  display: flex;
  margin: 0; 
  padding-left: 2rem;
  padding-right: 2rem;
}

.filter{
  padding: 0;
  margin: 0;
  width: fit-content;
  min-height: fit-content;
}

.tutorials{
	margin-left: 0;
	margin-right: 0;
	margin-bottom: auto;
}

.title{
    background-color: #4cbdec;
    padding: 5px;
	color:#fff;
}

.filter_title{
	background-color: #4cbdec;
    color: #fff;
    padding: 5px;
}

.card {
	height: auto;
	padding: 0 0.5rem 0.5rem 0.5rem;
	border: None;
	justify-content: space-between;
}

.card_desc{
	margin : 0;
	padding: 0;
}


.card_description{
	padding: 0.2rem 0.5rem;
}

.card-paths{
	height: auto;
}

.card-img{
	width : 3rem;
	height: 3rem;
	margin: 0.5rem;
}

.zoom{
	transition: transform .2s;
}

.zoom:hover{
	transform: scale(1.3);
}
.filterpanel{
	margin-bottom: 1rem;
	padding: 0;
	background: #f9f9f9;	
}

.filter_type{
	color : #4cbdec;
	margin: 0.2rem;
	list-style: None;
	width: auto;
}


.filter_item{
	width: fit-content;
	border-style: None;
	color: #000;
	font-size: 1rem;
}

.filter_title{
	padding: 0.5rem;
}

.front-title{
	display: block;
	color: #4cbdec;
	width: 100vw;
}

.search-div{
	padding-left: 2rem;
	padding-right: 3rem;
	margin-bottom: 0.5rem;
}

.search-bar{ 
	width: 90%;
    width: -moz-available;          
    width: -webkit-fill-available;  
    width: fill-available;
}

@media (max-width: 991.98px) {
	.search-div{
		padding-right: 2rem;
	}
	#content {
		padding-left: 1rem;
		padding-right: 1rem;
	}

}

@media (max-width: 576px) { 
	.card {
		padding: 0;
	}
	.tutorials{
		padding: 0;
	}
}