ora metto lo style

html,
body {
height: 100%;
}


body {
background: #001d38;
font-family: "Poppins", sans-serif;
overflow: hidden;
}


.center {
-webkit-box-align: center;
align-items: center;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
height: 100%;
-webkit-box-pack: center;
justify-content: center;
}


.wrapper {
display: -webkit-box;
display: flex;
grid-gap: 1em;
overflow: hidden;
width: 55em;
}
.wrapper > .inner {
display: -webkit-box;
display: flex;
grid-gap: 1em;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}


.card {
border-radius: 0.5em;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
.card > img {
border-top-right-radius: inherit;
border-top-left-radius: inherit;
display: block;
width: 17.5em;
}
.card > .content {
background: #0a2640;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
padding: 1em;
text-align: center;
}
.card > .content > h1, .card > .content > h3 {
margin: 0.35em 0;
}
.card > .content > h1 {
color: #fff;
font-size: 1.25rem;
line-height: 1;
}
.card > .content > h3 {
color: #ccc;
font-size: 0.9rem;
font-weight: 300;
}


.map {
margin-top: 1em;
}
.map > button {
all: unset;
background: #11406c;
cursor: pointer;
margin: 0 0.125em;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 100%;
height: 1em;
width: 1em;
}
.map > button.active:after {
background: #001d38;
content: "";
left: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
border-radius: 100%;
height: 0.5em;
width: 0.5em;
}