/* Grid-container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /*grid-template-columns: repeat(3, 1fr);*/
    gap: 10px;
    padding: 0px;
}


/* Card */
.card {
				/*border: 1px solid #000000;*/
				/*display: block;*/
				text-decoration: none;
				color: black;
				/*border-radius: 5px;*/
				overflow: hidden;
				/*background-color: #222429;*/
				/*box-shadow: 0 4px 10px rgba(0,0,0,0.1);*/
				
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

				border: 1px solid #696969;
				border-radius: 3px;

}

/* Menyrad */
.card-header {
				background: #ffffff;
				font-size: 1.0rem;
				font-weight: 600;
				color: #FF6F0F;
				padding: 4px 12px;
				/*font-size: 1.3rem;*/
				text-align: center;
}

/* Bild */
.card img {
    /*width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.4s ease;*/
    width: 100%;
    /*height: 100%;*/
transition: 0.6s ease-in-out;
				 opacity: 1;

}

/* Text */
.card p {
				padding: 0px 10px 10px 10px;
				margin: 0px 0px 0px 0px;
				font-size: 1.0rem;
				/*font-weight: 400;*/
				line-height:1.3rem;
				  

}
.card h3 {
				font-size: 1.0rem;
				font-weight: 600;
				/*color: #FF0000;*/
				text-align: center;
				padding: 0px 0px 0px 0px;

				margin-top: 0px;
				margin-bottom: 0px;


}


/* Hover */
.card:hover img {
    /*transform: scale(1.05);*/
     opacity: 0.5;

}

.sidebar {
				position: sticky;
				top: 10px;
				align-self: start;
				background: #F0F0F0;
				padding: 0px 10px 10px 10px;
				border-radius: 5px;
				z-index: 1;

}