*{
	margin: 0;
	padding: 0;
}

body{
	font-family: "Courier New", "Arial";
	background-color: gray;
}
.text-background{
	font-size: 70px;
	filter: blur(2px);
	margin-left: 1em;
	color: white;
}

p{
	font-size: 30px;
	font-weight: bold;
	color: white;
	display: inline-block;
	margin-right: 1em;
	line-height: 1;
}

.container{
	display: grid;
	grid-template-rows: 40px 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 3em 3em;
}


.CodingPlayground{
	margin-left: 4em;
	background-color: lightseagreen;
	grid-row-start: 2;
}

.PlaySystem{
	background-color: lightseagreen;
	grid-row-start: 2;

}

.WeirdFlex{
	background-color: lightseagreen;
	grid-row-start: 2;

}
.OopsIGrid{
	background-color: lightseagreen;
	grid-row-start: 2;
}

/* Wrapper um jedes Bild */
.image-wrapper {
    position: relative;       /* Bezug für Overlay */
    display: inline-block;    /* damit Grid-Flow bleibt */
    margin-right: 1em;        /* optional, Abstand zwischen Bildern */
}

/* Kleine Version */
.item {
    height: 20vw;
    border: none;
    display: block;
}

/* Overlay: große Version, zunächst unsichtbar */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 40vw;            /* Größe der Vergrößerung */
    width: auto;
    display: none;            /* unsichtbar bis Hover */
    border: 5px solid seagreen;
    z-index: 100;
    pointer-events: none;     /* Overlay blockiert Hover nicht */
    transition: transform 0.3s ease; /* optional sanft */
}

/* Hover: Overlay einblenden */
.image-wrapper:hover .overlay {
    display: block;
}