.banner{
	display: grid;
  	overflow: hidden;

	h1, .background-image {
		grid-area: 1 / 1;	
	}

	h1{
		place-self: center;
		img{
			max-width: 100%;
			transition: 0.3s;
			&:hover{
				scale: 1.05;
			}
		}

	}

	.background-image{

		height: 100px;
		img{
			width: 100%;
		}
	}
}

h3{
    position: relative;
    font-family: "Action Man";
    color: var(--color-blue);
    font-size: 48px;
    text-align: center;
    margin: 0.5em 0;
	z-index: 0;
	font-style: normal;

	&::before{
		content: attr(data-text);
		position: absolute;
		right: 0;
		left: 0;
		/* I fucking hate chrome */
		text-align: center;
		color: #fff; /* outline color */
		z-index: -1;
		pointer-events: none;
		-webkit-text-stroke: 8px white;
		text-shadow: 0px 4px 10px black;
	}
}



.wojak {
    position: absolute;
    bottom: 0;
    z-index: 50;       /* higher than banner/background */
    width: auto;
    max-width: 20%;    /* adjust size as needed */
    pointer-events: none; /* optional: allow clicks through */
}

/* first .wojak -> lower left */
.wojak:first-of-type {
    left: 0;
    transform: translateX(0);
}

/* second .wojak -> lower right */
.wojak:last-of-type {
    right: 0;
    transform: translateX(0);
}