body {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	height: 100vh;
	overflow: hidden;
	background-color: white;
}

div {
    position: relative;
    width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
    overflow: hidden;
}

div:hover > p {
	bottom: -2.4em;
}

img {
	display: block;
	max-width: calc(100% - 2.5em);
	max-height: 100vh;
}

span {
    flex-grow: 1;
    max-width: 3.5em;
}

#left {
    margin: 0 0 0 auto;
}

#right {
    margin: 0 auto 0 0;
}

span > a {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	width: 0;
	height: 0;
	padding: calc(70% - 0.1em) calc(50% - 0.05em);
	font-size: 1em;
	font-weight: bold;
	font-family: "Arial Black", sans-serif;
	background-color: #EBBA44;
	color: rgba(0, 0, 0, 0.6);
	border: solid 0.1em rgba(0, 0, 0, 0.3);
}

#left > a {
	border-top-left-radius: 50%;
	border-bottom-left-radius: 50%;
	border-right: none;
}

#right > a {
	border-top-right-radius: 50%;
	border-bottom-right-radius: 50%;
	border-left: none;
}

p {
	position: absolute;
	bottom: 0;
	padding: 0.5em 1.5em;
	margin: 0;
	background-color: rgba(38, 190, 198, 0.6);
	font-family: Arial, sans-serif;
	font-size: 0.6em;
	font-weight: bold;
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
	transition: bottom 0.3s;
}