html,
body {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
}

.container {
 position: relative;
 width: 100vw;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: space-around;
}

h4 {
 /* color: var(--mid); */
 position: absolute;
 width: 100%;
 left: 0;
 right: 0;
 bottom: 1rem;
 text-align: center;
 pointer-events: none;
 font-size: 1rem;
}

.flair {
 cursor: pointer;
 width: 100px;
 height: 100px;
 max-height: 20vh;
 max-width: 20vh;
}

.flair--3b {
 background-image: url(https://assets.codepen.io/16327/ui-flair-2.png);
}

.flair--4b {
 background-image: url(https://assets.codepen.io/16327/ui-flair-4.png);
}

.text {
 position: fixed;
 bottom: 1rem;
}