zmiany

src/base.scss

@@ -44,7 +44,7 @@ header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	&>a {
+	a {
 		padding: 0px 2px;
 		&:link,&:visited {
 			color: var(--text-opposite-4);
@@ -62,7 +62,7 @@ header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	&>img {
+	img {
 		max-width: 100%;
 		max-height: 100%;
 		padding: 1em;
@@ -76,7 +76,7 @@ nav {
 	align-items: center;
 	color: var(--text-opposite-1);
 	background-color: var(--green-1);
-	&>a {
+	a {
 		border-left: 1px solid var(--text-color-1);
 		&:first-child {
 			border-left: 0px;

src/index.scss

@@ -1,6 +1,6 @@
 .gallery {
 	margin: 1em;
-	height: 30em;
 	display: flex;
 	justify-content: center;
+	height: 20rem;
 }

src/index.ts

@@ -33,9 +33,10 @@ class Carousel extends LitElement {
 
 	render() {
 		return html`
-			<button class="left">&lt</button>
+			<button class="left">${'<'}</button>
+			<button class="right">${'>'}</button>
+
 			<img src=${this.currentItem.img}></img>
-			<button class="right">&gt</button>
 		`;
 	}
 
@@ -45,13 +46,6 @@ class Carousel extends LitElement {
 				max-width: 100%;
 				height: 100%;
 				height: 100%;
-				display: flex;
-				align-items: center;
-			}
-
-			button {
-				z-index: 1;
-				margin: -6em;
 			}
 
 			img {
@@ -60,15 +54,27 @@ class Carousel extends LitElement {
 				transition: 0.2s;
 			}
 
-			img:hover {
-				transform: scale(1.1);
+			img:hover, button:hover~img {
+				transform: scale(1.05);
 			}
 
 			button {
 				border: 1px solid var(--background-opposite-2);
 				border-radius: 50%;
 				background-color: var(--background-primary-2);
+				cursor: pointer;
+				position: relative;
+				top:-50%;
+				z-index: 1;
 			}
+
+			.left {
+				left: 20%;
+			}
+			.right {
+				left: 80%;
+			}
+			
 		`;
 	}
 }