.pyra {
  max-width: var(--xl-width);
  margin: var(--xl-gap-y) auto;
  padding: 0 var(--xl-gap-x);
  display: grid;
  gap: var(--xl-gap-x);
  @media (min-width: 951px) {
    grid-template-columns: 1.2fr .8fr;
  }
}

.pyra__content {
  display: grid;
  grid-template-areas: "main";
}

.pyra__media svg {
  width: 100%;
  height: auto;
}

.pyra__title {
  grid-area: main;
  margin: auto 0;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: .3s ease-in-out;
}

.pyra__title--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pyra__part {
  cursor: pointer;
  transition: .3s ease-in-out;
}

.pyra__part path {
  transition: .3s ease-in-out;
}

.pyra__part:hover {
  opacity: 1;
}

.pyra__part:hover > path,
.pyra__part--active > path {
  fill: var(--hover-color);
  stroke: var(--hover-color);
}

.pyra__part:hover .pyra__icon > path,
.pyra__part--active .pyra__icon > path {
  stroke: white;
}

.pyra__part--disabled {
  opacity: .1;
}

.pyra__terms {
  display: grid;
  grid-area: main;
  grid-template-areas: "main";
  @media (min-width: 1025px) {
    padding: var(--xl-gap-y) 0;
  }
}

.pyra__term {
  grid-area: main;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .3s ease-in-out;
}

.pyra__term--active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.pyra__term > img {
  margin: 0 0 20px 0;
}

.pyra__parent {
  font: var(--venti);
  color: var(--teal);
  margin: 0 0 30px 0;
}

.pyra__children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pyra__child--empty {
  cursor: default;
}

.pyra__child--empty .bubble:hover {
  background-color: var(--paper);
  border-color: var(--teal);
  color: var(--teal);
}