@import url("style.css");	
.projects{
margin-left: 5%;
margin-right: 5%;
}
.projects-card{
	text-align: center;
    transition: 500ms;
    border-top: 0px;
    border-radius: 4px;
    border-top: 0;
    border: 1px solid var(--clr-rose);
}
.projects-card:hover{
    cursor: pointer;
	
    

}
.projects-card img{
	width: 100%;
	align-self: center;
	border-radius: 2px;
	border-bottom-left-radius: 0;
}


.projects-grid{
	margin-bottom: 10px;
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
}




@media (min-width: 768px) {
	.projects-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1024px) {
	.projects-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.project-button{
	font-weight: bold;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 5px;
	background: none;
	color: white;
	border: 2px solid var(--clr-dark-cyan);
	transition: 1s;
	cursor: pointer;

}
.project-button:hover{
	background: var(--clr-dark-cyan);
	box-shadow: 0px 0px 10px var(--clr-dark-cyan);
}
.discontinued{
	font-weight: bolder;
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 5px;
	background: none;
	color: var(--clr-rose);
	border: 2px solid var(--clr-rose);
	transition: 1s;
	cursor:not-allowed;
}

.discontinued:hover{
	background: var(--clr-rose);
	color: white;
}

.project-tag{
	background: #083344;
	font-weight: bold;
	font-size: medium;
	padding: 5px;
	border-radius: 4px;
	box-shadow:0px 0px 10px #083344;
	margin-bottom:5px;
	
	align-self:center;
	}