.storycards-container{
	display: grid;
	padding:100px 0;
	width:85%;
	gap:30px;
}

.storycard{
	width:80%;

	background: #fff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	border-radius: 10px;
	padding: 40px;
	gap:15px;
	box-shadow: 1px 1px 2px #aaa;
	height: auto;
	max-height:120px;
	z-index:8;

	transition: max-height 0.6s ease-in-out;

}

.storycard:hover{
	cursor: pointer;
}

.storycard:hover .storycard-button{
	background-color: var(--grad-left);
}



.storydesc-visible{
	max-height:750px;
	box-shadow: 2px 2px 5px #aaa;
}

.storycard-row-container{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width:100%;

}

.storycard-button{
	width:40px;
	height:40px;
	color: #222;
	border-radius:500px;
	background-color: var(--cool);
	font-size: 30px;
	font-weight: bolder;
	display: flex;
	justify-content: center;
	align-items: center;

	transition: transform 0.5s ease-in-out, background-color 0.4s ease-in-out;

}



.plus-btn{
	width:25px;
}

.storycard-button:hover{
	cursor:pointer;
}

.storycard-button-rotated{
	transform: rotate(135deg);
}

.storycard-title{
	width:100%;
	padding: 10px;
	font-weight: bolder;
	font-size:1.7rem;


}
.storydesc-container{
	
	display: flex;
	justify-content: center;
	align-items: center;

	overflow: hidden;

}

.storycard-desc{

	color: black;
	width:100%;
	padding: 10px;
	font-size: 1.1rem;
	max-height:750px;


	transition: transform 0.6s ease-in-out, color 0.6s ease-in-out;

}

.non-hidden-storycard{
	transform: translateY(0) !important;

}

.storydesc-wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: transform 0.9s ease-in-out, color 0.6s ease-in-out;
	padding-bottom: 20px;
	transform: translateY(-100%);
}

.story-img{
	width:150px;
	margin-bottom:20px;
	
}





@media (min-width: 1201px) {
    .storycards-container {
      grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1200px) {
    .storycards-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .storycard{
    	max-width:400px;
    }
}