.wisdp .wisdp__panel {
  /*width: 85%;
  max-width: 130rem;  */
  background-color: var(--color-white);
  border-radius: 2rem;
  padding: 3rem;
  margin: 3rem 0;
}

.wisdp__panel.wisdp__panel--reversed {
  background: linear-gradient(320deg, rgba(161, 35, 80, 1), rgba(75, 37, 72, 1));
  border-radius: 0;
  padding: 0;
  height: auto;
}
  .breakpoint-tablet-landscape .wisdp__panel.wisdp__panel--reversed {
    height: auto;
}
.wisdp__panel--reversed .tile {
  background-color: transparent;
  border-radius: 0;
  flex-direction: row;
  display: block;
  height: auto;
  position: relative;
}
  .wisdp__panel.wisdp__panel--reversed .tile__image {
    width: 50%;
    clip-path: circle(115.7% at 18% 32%);
    -webkit-clip-path: circle(115.7% at 18% 32%);
    border-radius: 0;
    display: inline-block;
    position: unset;
  } 
    .wisdp__panel.wisdp__panel--reversed .tile__image img {
      width: 50%;
      height: auto;
      top: -25%;
      max-width: unset;
      left: 0;
    } 
  .wisdp__panel.wisdp__panel--reversed .tile__text {
    width: 50%;
    display: inline-flex;
    top: unset;
    left: unset;
    flex-direction: column;
    margin-top: 3rem;
    margin-left: 3rem;
    background: unset;
  }
    .wisdp__panel .tile__text p {
      color: var(--color-white);
      font-size: var(--text-body);
      font-family: var(--condensed-font);
      width: 90%;
      margin-bottom: 1rem;
    }
    .wisdp__panel .tile__text a {
      color: var(--color-secondary);
    }
    .wisdp__panel .tile__text  ul li {
      color: var(--color-white);
    }
    .wisdp__panel .tile__text .button {
      display: inline-block;
      position: relative;
      bottom: unset;
      left: unset;
      min-width: 30%;
      max-width: 40%;
      margin-right: 2rem;
      color: var(--color-white);
    }
  .breakpoint-widescreen .wisdp__panel.wisdp__panel--reversed .tile {
    height: 50rem;
  }
    .breakpoint-widescreen .wisdp__panel.wisdp__panel--reversed .tile__image {
      clip-path: circle(115.7% at 6% 43%);
      -webkit-clip-path: circle(115.7% at 6% 43%);
    }
      .breakpoint-widescreen .wisdp__panel.wisdp__panel--reversed .tile__image img {
        top: -45%;
      }
  .breakpoint-desktop .wisdp__panel.wisdp__panel--reversed .tile {
    height: 60rem;
  }
    .breakpoint-desktop .wisdp__panel.wisdp__panel--reversed .tile__image {
      clip-path: circle(115.7% at -14% 32%);
      -webkit-clip-path: circle(115.7% at -14% 32%);
    }
    @media screen and (min-width: 1485px) and (max-width: 1799px) {
      .breakpoint-desktop .wisdp .wisdp__panel.wisdp__panel--reversed .tile__image {
        clip-path: circle(115.7% at -3% 32%);
        -webkit-clip-path: circle(115.7% at -3% 32%);
      }
    }
    @media screen and (min-width: 1201px) and (max-width: 1251px) {
      .breakpoint-desktop .wisdp .wisdp__panel.wisdp__panel--reversed .tile__imageimg{
        top: 0;
      }
    }
    .breakpoint-desktop .wisdp__panel.wisdp__panel--reversed .tile__image img {
      top: 0;
      width: 60%;
    }
  .breakpoint-tablet-landscape .wisdp__panel.wisdp__panel--reversed .tile {
    height: 60rem;
    min-height: 35rem;
  }
    .breakpoint-tablet-landscape .wisdp__panel.wisdp__panel.wisdp__panel--reversed .tile__image {
      width: 40%;
      clip-path: circle(115.7% at -50% 32%);
      -webkit-clip-path: circle(115.7% at -50% 32%);
    }
    @media screen and (min-width: 1100) and (max-width: 1200px) {
      .breakpoint-desktop .wisdp .wisdp__panel.wisdp__panel--reversed .tile__image {
        clip-path: circle(115.7% at -43% 32%);
        -webkit-clip-path: circle(115.7% at -43% 32%);
      }
    }
      .breakpoint-tablet-landscape .wisdp__panel.wisdp__panel--reversed .tile__image img {
        width: auto;
        height: 100%;
        top: 0;
        left: -10%;
        max-width: unset;
      } 
    .breakpoint-tablet-landscape .wisdp__panel.wisdp__panel--reversed .tile__text {
      width: 60%;
      margin-top: 3rem;
      margin-left: 3rem;
    }
  .breakpoint-tablet-portrait .wisdp__panel.wisdp__panel--reversed .tile {
    height: 115rem;
  }
    .breakpoint-tablet-portrait .wisdp__panel.wisdp__panel--reversed .tile__image,
    .breakpoint-mobile-only .wisdp__panel.wisdp__panel--reversed .tile__image {
      width: 100%;
      clip-path: circle(88.7% at 38% -11%);
      -webkit-clip-path: circle(88.7% at 38% -11%);
      max-height: 50rem;
    }
    .breakpoint-tablet-portrait .wisdp__panel.wisdp__panel--reversed .tile__image {
      max-height: 60rem;
    }
      .breakpoint-mobile-only .wisdp__panel--reversed .tile__image img,
      .breakpoint-tablet-portrait .wisdp__panel--reversed .tile__image img{
        width: 120%;
        top: -10%;
      }
    .breakpoint-tablet-portrait .wisdp__panel--reversed .tile__text,
    .breakpoint-mobile-only .wisdp__panel--reversed .tile__text {
      width: 100%;
      display: flex;
    }
    .breakpoint-tablet-portrait .wisdp__panel--reversed .tile__text {
      margin-top: 0;
    }
  @media screen and (min-width: 600px) and (max-width: 800px) {
    .breakpoint-tablet-portrait .wisdp__panel--reversed .tile__text{
      margin-top: -5rem;
    }
  }
  .breakpoint-mobile-only .wisdp__panel--reversed .tile {
    height: 110rem;
  }
    .breakpoint-mobile-only .wisdp__panel--reversed .tile__text {
      margin-top: -8rem;
    }
    .breakpoint-mobile-only .wisdp__panel--reversed .tile__text .button {
      margin-top: 1rem;
      margin-bottom: 1rem;
    }

.wisdp__panel.wisdp__panel--reversed-orange {
  padding: 3rem;
  margin: 3rem 0;
  background: linear-gradient(107deg,rgba(243,110,69,1),rgba(250,168,78,1));
  border-radius: 0;
  padding: 0;
  height: auto;
}

  .wisdp__panel--reversed-orange .grid-row,
  .wisdp__panel--reversed-orange .container > div:nth-of-type(2) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wisdp__panel--reversed-orange .container > div:nth-of-type(2) {
    margin-bottom: 3rem;
  }

    .breakpoint-mobile-only .wisdp__panel.wisdp__panel--reversed-orange .grid-row,
    .breakpoint-tablet-portrait .wisdp__panel.wisdp__panel--reversed-orange .grid-row {
      display: block;
    }
      .breakpoint-mobile-only .wisdp__panel.wisdp__panel--reversed-orange .grid-row [class*="col-"],
      .breakpoint-tablet-portrait .wisdp__panel.wisdp__panel--reversed-orange .grid-row [class*="col-"] {
        display: inline-block;
      }

    .wisdp__panel--reversed-orange h1 {
      margin-top: 3rem;
    }

.wisdp__champion-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
  .wisdp__champion-list .title {
    margin-top: 4rem;
    align-self: baseline;
  }
.wisdp__champions {
  margin: 0 5rem;
  display: flex;
  overflow: hidden;
  transition: max-height 0.3s ease-in;
}
  .breakpoint-mobile-only .wisdp__champions,
  .breakpoint-tablet-portrait .wisdp__champions {
    margin: 0;
  }
  .wisdp__champions .views-row {
    display: inline-block;
  }
  .breakpoint-mobile-only .wisdp__champions .grid-row [class*="col-"],
  .breakpoint-tablet-portrait .wisdp__champions .grid-row [class*="col-"]  {
    height: unset;
  }

.champion {
  position: relative;
  height: 25rem;
  display: flex;
  overflow: hidden;
  margin: 1rem;
}
  .breakpoint-tablet-portrait .champion {

  }
  .breakpoint-mobile .champion {

  }
.champion .champion__image {
    width: 100%;
    align-self: center;
}
  .champion .champion__image img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    max-height: 15rem;
    -webkit-object-fit: contain;
    -webkit-object-position: center;
  }

.champion .champion__details {
  background-color:rgba(75, 37, 72, 0.8);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2rem;
  border-radius: 2rem;
  opacity: 0;
  transition: opacity 300ms ease-in;
}
.champion__details .active,
.champion__details:hover {
  opacity: 1;
  transition: opacity 300ms ease-in;

}
.champion__details a, 
.champion__details p a {
  color: var(--color-primary-light);
}
  .champion__details a:hover, 
  .champion__details p a:hover,
  .champion__details a:active, 
  .champion__details p a:active  {
    color: var(--color-white);
  }
  .champion__details h3 {
    font-family: var(--header-font);
    color: var(--color-white);
    margin-top: 0;
    font-size: var(--text-large);

  }
  .champion__details p {
    color: var(--color-white);
    font-family: var(--condensed-font);
    font-size: var(--text-small);
  }
    .breakpoint-mobile-only .champion__details p {
      font-size: var(--text-smaller);
    }
  .champion__details .button {
    padding: 0.6rem;
    position: absolute;
      bottom: 1.5rem;
      left: 1.25rem;
    display: block;
    width: 90%;
    font-size: var(--text-small);
  }

.wisdp .wisdp__accordion {
  display: block;
  margin: 2rem auto;
  width: 30%;
}
  .breakpoint-tablet-landscape .wisdp .wisdp__accordion,
  .breakpoint-tablet-portrait .wisdp .wisdp__accordion {
    width: 50%;
  }
  .breakpoint-mobile-only .wisdp .wisdp__accordion {
    width: 100%;
  }
.wisdp__accordion:focus,
.wisdp__accordion:active,
.wisdp__accordion:hover {
  color: var(--color-white);
}

.wisdp__actions {
  margin-top: 3rem;
}
  .wisdp__actions .button {
    display: inline-block;
    margin: 0.5rem;
    margin-left: 0;
  }

.breakpoint-mobile-only .wisdp__video,
.breakpoint-tablet-portrait .wisdp__video {
  display: flex;
  flex-direction: column-reverse;
}

.wisdp__video .col-m-16x9 {
  padding-left: unset;
  padding-right: unset;
}
.wisdp__video iframe {
  border: none;
}
  .breakpoint-mobile-only .wisdp__video .col-m-16x9 .rectangle {
    margin-top: 56.25%;
  }
.wisdp__video .breakpoint-mobile-only [class*="col-m-"] [class*="rectangle__content"],
.wisdp__video .breakpoint-tablet-portrait [class*="col-m-"] [class*="rectangle__content"] {
  position: absolute;
}