.royal-family-tree {
  overflow: hidden;
  box-sizing: border-box;

  --gapx: 1em;
  --gapy: 2.5em;
  display: grid;
  gap: var(--gapy) var(--gapx);
  grid-auto-rows: min-content;
  grid-template-columns: repeat(8, 1fr);
  position: relative;
  width: 100%;
  max-width: 750px;

  font-size: 10px;
  font-family: sans-serif;
  font-weight: normal;
  line-height: normal;

  padding: 1em;
  margin: 2em auto;
}

.royal-family-tree .background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/content/dam/ctvnews/en/images/national/2021/royal-bg.png");
  background-size: cover;
  z-index: -1;

  filter: blur(0.5px);
}

.royal-family-tree * {
  box-sizing: border-box;
}

.royal-family-tree .royal {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 0.5em;
  box-shadow: 0 0 0 0.1em rgba(22, 22, 22, 0.1);
  filter: drop-shadow(0.5em 0.5em 0.5em rgba(22, 22, 22, 0.2));
  border-radius: 0.1em;

  --img-size: 0.8em;
  /* width: calc(18 * var(--img-size)); */
  /* height: calc(24 * var(--img-size)); */
}

.royal-family-tree .royal.adjust-y {
  margin-top: calc(-1 * var(--gapy) + 1em);
  margin-bottom: calc(var(--gapy) + 1em);
}
.royal-family-tree .royal:hover {
  box-shadow: 0 0 0 0.1em rgba(22, 22, 22, 0.5);
}
.royal-family-tree .royal.succession:hover {
  box-shadow: 0 0 0.1em 0.1em rgba(22, 22, 22, 0.5),
    0 0.3em 0px 0px rgb(186 144 31);
}
.royal-family-tree .royal.succession {
  /* background-color: rgb(214, 249, 255); */
  box-shadow: 0 0 0.1em 0.1em rgba(22, 22, 22, 0.1),
    0 0.4em 0px 0px rgb(186 144 31);
}

.royal-family-tree .royal .img-container {
  width: 100%;
  height: calc(12 * var(--img-size));
  position: relative;
  transition-duration: 0.4s;
}

.royal-family-tree .royal .img-shadow {
  box-shadow: inset 0.2em 0.2em 0.2em rgba(22, 22, 22, 0.2);
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.royal-family-tree .royal .img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
}

.royal-family-tree .royal .name {
  font-family: "ÐÇ¿Õ´«Ã½Sans-Bold", "ÐÇ¿Õ´«Ã½ Sans Bold", sans-serif;
  text-transform: uppercase;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 0.4em;
  height: 2.5em;
  user-select: none;
  line-height: 1;
}

.royal-family-tree .royal .info {
  text-align: center;
  overflow: hidden;
  font-size: 1em;
  height: 0;
  padding: 0 0.4em;

  opacity: 0;
  transition-duration: 0.2s;

  overflow-y: auto;
}

.royal-family-tree .royal.open .info {
  opacity: 1;
  transition-delay: 0.1s;
  height: 18em;
  padding: 0em 0.4em;
}

.royal-family-tree .royal.open {
  /* height: auto; */
}
.royal-family-tree .royal.open .img-container {
  /* height: calc(5 * var(--img-size)); */
  height: 0em;
}

.royal-family-tree .connection {
  --width: 0.3em;
  box-sizing: content-box;
  border: var(--width) solid #5a5a5a;
  padding: 1em;
}

.royal-family-tree .connection.succession {
  border-color: rgb(186 144 31);
}

.royal-family-tree .connection.right {
  border-right: none;
  border-bottom: none;
  margin-top: calc(var(--gapy) / -2);
  margin-left: calc(var(--gapx) / -2 - (var(--width) / 2));
  margin-right: calc(-1 * var(--gapx));
}

.royal-family-tree .connection.left {
  border-left: none;
  border-bottom: none;
  margin-top: calc(var(--gapy) / -2);
  margin-right: calc(var(--gapx) / -2 - (var(--width) / 2));
  margin-left: calc(var(--gapx) / -2);
}

.royal-family-tree .connection.up {
  border-left: none;
  border-bottom: none;
  border-top: none;
  margin-top: calc(var(--gapy) / -2);
  margin-right: calc(var(--gapx) / -2 - (var(--width) / 2));
}

.royal-family-tree .connection.up.long {
  border-left: none;
  border-bottom: none;
  border-top: none;
  margin-top: calc(-2 * var(--gapy));
  margin-bottom: calc(2 * var(--gapy));
  margin-right: calc(var(--gapx) / -2 - (var(--width) / 2));
}

.royal-family-tree .connection.down {
  border-left: none;
  border-bottom: none;
  border-top: none;
  margin-bottom: calc(var(--gapy) / -2);
  margin-right: calc(var(--gapx) / -2);
  margin-left: calc(var(--gapx) / -2);
}

.royal-family-tree .connection.middle {
  border-right: none;
  border-bottom: none;
  margin-bottom: calc(var(--gapy) / -2 - (var(--width)));
  margin-top: 75%;
}

.info-container {
  position: absolute;
  width: 100%;
  height: 100%;

  opacity: 0;
  pointer-events: none;
  transition-duration: 0.3s;

  display: flex;
  align-items: center;
  justify-content: center;
}
.info-container .info-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.info-container .info {
  padding: 2em;
  margin: 4em;

  background-color: white;
  z-index: 10;
}

.info-container .info-body {
  font-size: 1.4em;
  margin-top: 1em;
}
.info-container .info-body p {
  margin-top: 1em;
  font-family: sans-serif;
  line-height: normal;
  font-size: 1em;
}
.info-container .info-title {
  font-size: 1.8em;
  font-family: "ÐÇ¿Õ´«Ã½Sans-Bold", "ÐÇ¿Õ´«Ã½ Sans Bold", sans-serif;
}
.info-container .info-succession {
  font-size: 1.4em;
  font-family: "ÐÇ¿Õ´«Ã½Sans-Bold", "ÐÇ¿Õ´«Ã½ Sans Bold", sans-serif;
  color: white;
  background-color: rgb(186 144 31);
  padding: 0.5em 1em;
  text-align: center;
  margin-top: 1em;
}
.info-container .info-succession.hidden {
  display: none;
}

.info-container.open {
  opacity: 1;
  pointer-events: all;
}