.section{ 
	padding-block: 56px; 
}

.course{
	background-color: #f2f2f2;
}

.container{
	padding-inline: 16px;
}

.title-sm{
	font-size: 1.8rem;
  	font-weight: 500;
}

.section-subtitle{
	font-weight: 600;
  	color: hsl(173, 60%, 47%);
  	margin-block-end: 4px;
  	text-align: center;
}

.headline-md{
	color: hsl(224, 53%, 10%);
	font-weight: 700;
	font-size: 3rem;
  	line-height: 1.2;
}

.section-title{ 
	margin-block-end: 24px;
	text-align: center; 
}

:is(.headline-md) .span{
  	color: hsl(357, 100%, 75%);
  	display: inline;
}

.headline-md .has-after{ 
	padding-block-end: 8px; 
}

.headline-md .has-after::after{
  	background-image: url("../Images/line-shape.svg");
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
  	background-repeat: no-repeat;
  	background-position: center bottom;
  	background-size: contain;
  	z-index: -1;
}

.has-after{
  	position: relative;
  	z-index: 1;
}

.has-after::after{
  	content: "";
  	position: absolute;
}

.category .blog-form{
	width: 100%;
	padding: 20px;
	background-color: #f4f4f4;
	margin: 50px 0 25px;
}

.category .blog-form input[type="text"]{
	width: 75%;
	margin-right: 2%;
	padding: 15px;
	font-size: 1.4rem;
}

.category .blog-form input[type="submit"]{
	width: 22%;
	padding: 15px;
	font-size: 1.4rem;
	color: #fff;
	background-color: #262626;
	cursor: pointer;
}

.grid-list{
  	display: grid;
  	gap: 28px;
  	padding-block: 20px 44px;
}

.category .grid-list{
	padding-block: 40px 52px;
}

.category .grid-list li{
	list-style-type: none;
}

.category .blog-list li{
	list-style-type: none;
	display: block;
	padding: 25px 0;
}

.category-card{
  	display: flex;
  	align-items: flex-start;
  	gap: 20px;
  	border-inline-start: 4px solid transparent;
  	border-color: #000;
}

.blog-card{
  	display: flex;
  	align-items: flex-start;
  	gap: 20px;
  	border-inline-start: 4px solid transparent;
  	border-color: #000;
}

.blog-card .blog-post-bio{
	text-align: justify;
	font-size: 1.2rem;
	margin-top: 0.5rem;
}

.category-card .btn, .blog-card .btn{ 
	margin-block-start: 4px; 
	margin-inline: auto;
	padding: 0.2rem 1rem;
	margin-top: 1.5rem;
	font-size: 1.2rem;
}

.blog-card .code-block{
  	border-radius: 8px;
  	overflow: hidden;
  	position: relative;
  	margin-top: 50px;
}

.blog-card .code-header {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	padding: 10px;
  	background: #3d3d3d;
  	color: #fff;
}

.blog-card .language {
  	font-weight: bold;
  	font-size: 14px;
}

.blog-card .copy-btn {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.blog-card .copy-btn:hover {
  background: #0056b3;
}

.blog-card code {
  font-size: 14px;
  white-space: pre-line;
}

.blog-card .btn{ 
	font-size: 1.4rem;
}

.card-container{
	container-type: inline-size;
	list-style-type: none;
}

.filters a{
	font-size: 14px;
	margin-right: 10px;
	color: #fff;
	background-color: #000;
	padding: 5px 10px;
}

@container (min-width: 500px){
	.course-card{ 
		flex-direction: row; 
	}

  	.course-card .card-banner{
    	width: 160px;
    	flex-shrink: 0;
  	}
}

.card{
  	position: relative;
  	background-color: hsl(0, 0%, 100%);
  	padding: 24px;
  	border-radius: 8px;
  	transition: 0.25s ease;
  	box-shadow: 0px 35px 65px -10px hsla(0, 0%, 0%, 0.5);
}

.course-card{
  	border-block-end: 4px solid transparent;
  	display: flex;
  	flex-direction: row;
  	gap: 24px;
  	border-color: #000;
}

.course-card .card-banner{
  	height: 160px;
  	background-color: hsl(0, 0%, 80%);
  	overflow: hidden;
  	border-radius: 4px;
}

.img-cover{
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
}

.course-card :is(.wrapper, .rating-wrapper){
  	display: flex;
  	align-items: center;
}

.course-card .wrapper{
  	justify-content: space-between;
  	gap: 16px;
}

.title-lg{
  	color: hsl(224, 53%, 10%);
  	font-weight: 700;
  	font-size: 2.2rem;
  	line-height: 1.4;
}

.course-card .card-price{ 
	color: hsl(357, 100%, 75%); 
}

.course-card .rating-wrapper{ 
	gap: 4px; 
}

.course-card .card-title{ 
	margin-block: 8px 16px; 
}

.course-card .card-meta{ 
	justify-content: flex-start;
	justify-content: space-between; 
}

.course-card .card-meta .title-sm{
  	display: flex;
  	gap: 8px;
}

.card-content .btn{
	background-color: #000;
	border-color: #000;
	padding: 0.5rem 1.5rem;
	font-size: 1.5rem;
}

.card-content .btn:hover{
	background-color: transparent;
}

.answers-list{
	margin: 25px 0;
}

.answers-list .answers{
	margin-top: 50px;
}

.answers-list .answers h4{
	font-size: 16px;
	margin-bottom: 15px;
	font-weight: bolder;
}

.answers-list .answers div{
	font-size: 14px;
	text-align: justify;
}

@media (min-width: 0px){
	.course-card{
		flex-direction: column;
	}
}

@media (min-width: 575px){
	.container{
	    max-width: 640px;
	    width: 100%;
	    margin-inline: auto;
	}

	.card{
		padding: 32px;
	}

	.course-card{
		flex-direction: column;
	}
}

@media (min-width: 768px){
	.container{
	    max-width: 768px;
	}

	.grid-list{
		grid-template-columns: 1fr 1fr;
	}

	.course-card{
		flex-direction: column;
	}
}

@media (min-width: 992px){
	.container{
	    max-width: 1024px;
	}

	.category .grid-list{
		grid-template-columns: repeat(3, 1fr);
	}

	.course .grid-list{
		grid-template-columns: 1fr 1fr;
		margin-block: 40px 48px;
	}

	.course-card{
		flex-direction: column;
	}
}

@media (min-width: 1200px){
	.container{
	    max-width: 1170px;
	}

	.course-card{
		flex-direction: row;
	}
}