.card{
	text-decoration: none;
	position: relative;
	box-sizing: border-box;
	font-family: sans-serif;
	cursor: pointer;
	width: 300px;
	aspect-ratio: 4/7;
	border-radius: 20px;
	background-size: contain;
	display: flex;
	flex-direction: column;
	justify-content: end;
	transition: 200ms;
	background-color:  #5E81AC;
}
.card .icon:hover{
	transform: scale(1.2,1.2);
}
.card:hover,
.card:focus-visible{
	transform: scale(1.02,1.02)
}

.card img{
	height: 50%;
	object-fit: cover;
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	/* background-color:  #5E81AC; */
}
.card .title {
	position: relative;
	box-sizing: border-box;
	padding-top: 0.5em;
	height: 50%;
	width: 100% ;
	/* padding-inline: 1em; */
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	/* background-color: #5E81AC; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: 100ms;
}
.card:hover{
	background-color:#BF616A;
}
.card .name{
	font-size: 2em;
	color: white;
	padding: 0.5em;
	padding-top: 0.2em;
}

.card .tags{
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	column-gap: 0.25em;
	padding-inline: 0.5em;
	margin-bottom:0.5em;
	flex-grow: 0;
}
.card .tag{
	cursor: pointer;
	text-decoration: unset;
	background-color: #D8DEE9;
	color: #2E3440;
	border-radius: 100px;
	padding-inline: 1em;
	line-height: 1.5em;
	margin-bottom: 0.5em;
	transition: 100ms;
}
.card .tag:hover{
	transform: scale(1.04, 1.04);
	background-color: #D08770;
}

.card .icon{
	text-decoration: unset;
	position: absolute;
	font-size: 1.5rem;
	top:-0.5em;
	right:-0.5em;
	padding: 0.25em;
	background-color: #ECEFF4;
	border-radius:1000px;
	transition: 100ms;
}
.card .title .category{
	position: absolute;
	text-decoration: none;
	color: #ECEFF4;
	font-size: 1.5rem;
	top: -0.8em;
	left: -0.5em;
	background-color: #2E3440;
	padding-inline: 1em;
	border-radius: 1000px;
	transition: 100ms;
}
.card .title .category:hover{
	background-color: #434C5E;
	transform: scale(1.05, 1.05)
}
.card:hover .icon{
	animation:  shake 0.6s
}

  @keyframes shake{
    0%{
      transform: rotate(0)
		scale(1,1);
    }
    25%{
      transform: rotate(30deg)
      		scale(1.2,1.2)
      ;
    }
    50%{
      transform: rotate(-30deg)
      		scale(1.2,1.2);
    }
    74%{
  transform: rotate(30deg)
  		scale(1.2, 1.2);
	}
	100%{
      transform: rotate(0)
      	scale(1,1);
    }
  }