:root {
    --r-heading-text-transform: none;
}

.a {
    background-color: transparent;
    width: 100%;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
}

.a__container {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* .a:hover .a__container {
  transform: rotateY(180deg);
} */

.a.is-flipped .a__container {
  transform: rotateY(180deg);
}

.a__front,
.a__back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    box-shadow: 0 0 5px #0003;
}

/* Style the front side (fallback if image is missing) */
.a__front {
  border-radius: 6px;
  cursor: pointer;
}

/* Style the back side */
.a__back {
  background-color: #2ecc71;
  transform: rotateY(180deg);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.a__back .level {
  margin: 0;
  margin-bottom: 1rem;
}

.reveal .slide-image {
    max-width: 50%;
    object-fit: cover;
    box-shadow: 0 0px 10px 0px #666;
}

.level {
  background-color: #282828;
  color: #fff;
  font-size: 1em;
  padding: 0.2em 0.6em;
  border-radius: 100%;
  display: inline-block;
  margin-top: 1em;
}

.level--1 {
  background-color: #f39c12;
}
.level--2 {
  background-color: #3498db;
}

a.home {
  position: fixed;
  top: 6px;
  left: 6px;
  z-index: 1000;
}

a.home svg {
  width: 30px;
  height: 30px;
}