div.content-cards {
  display: flex;
  flex-wrap: wrap;
  margin: 1.5rem -1rem; }
  div.content-cards:after {
    content: "";
    flex-grow: 1000000000; }
  div.content-cards div.content-card {
    position: relative;
    width: 33.3%;
    min-width: 300px;
    flex-grow: 0;
    font-size: 1rem; }
    div.content-cards div.content-card.width-2 {
      width: 50%; }
    div.content-cards div.content-card.width-3 {
      width: 66.6%; }
    div.content-cards div.content-card a {
      position: static; }
    div.content-cards div.content-card a[target]:hover {
      text-decoration: none;
      border: none; }
    div.content-cards div.content-card a:after {
      border: none; }
    div.content-cards div.content-card div.content-card-inner,
    div.content-cards div.content-card a.content-card-inner {
      display: block;
      margin: 1rem;
      border-radius: 1.5rem;
      overflow: hidden;
      color: #000000; }
      div.content-cards div.content-card div.content-card-inner div.link-hint,
      div.content-cards div.content-card a.content-card-inner div.link-hint {
        pointer-events: none; }
      div.content-cards div.content-card div.content-card-inner div.link-hint:after,
      div.content-cards div.content-card div.content-card-inner a.link-hint:after,
      div.content-cards div.content-card a.content-card-inner div.link-hint:after,
      div.content-cards div.content-card a.content-card-inner a.link-hint:after {
        content: "\e092";
        font-family: 'Glyphicons Halflings';
        font-size: 1rem;
        line-height: 1;
        text-align: center;
        position: absolute;
        z-index: 6;
        top: 2rem;
        right: 2rem;
        height: 2rem;
        width: 2rem;
        padding: 0.5rem 0 0 0.125rem;
        border-radius: 0.5rem;
        background-color: var(--hint-bg);
        color: var(--hint-text);
        transition: all 0.3s ease-in-out; }
    div.content-cards div.content-card h4 {
      margin: 0 0 0.5rem 0;
      font-size: 1.125rem;
      line-height: 1.33;
      font-weight: bold; }
    div.content-cards div.content-card *.top,
    div.content-cards div.content-card *.bottom {
      position: relative;
      display: block;
      aspect-ratio: 4 / 3;
      padding: 1.25rem 1.5rem;
      color: #000000; }
    div.content-cards div.content-card *.top {
      color: #000000;
      background-color: var(--top-bg);
      display: flex; }
      div.content-cards div.content-card *.top div.tag-label {
        position: absolute;
        z-index: 5;
        font-size: 0.875rem;
        line-height: 1;
        font-weight: bold;
        letter-spacing: 0.1ex;
        padding: 0.5625rem 0.5625rem;
        border-radius: 0.5rem;
        left: 1rem;
        top: 1rem;
        background-color: var(--hint-bg);
        color: var(--hint-text);
        transition: all 0.3s ease-in-out; }
      div.content-cards div.content-card *.top div.image-wrap {
        position: absolute;
        z-index: 1;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: #ffffff; }
        div.content-cards div.content-card *.top div.image-wrap img {
          width: 100.5%;
          max-width: none;
          height: auto; }
      div.content-cards div.content-card *.top h4 {
        z-index: 10;
        align-self: flex-end;
        margin: 2.5rem 0 0 0; }
      div.content-cards div.content-card *.top.image h4 {
        text-shadow: 0 0 8px white, 0 0 4px white, 0 0 2px white; }
    div.content-cards div.content-card *.bottom {
      background-color: var(--bottom-bg); }
      div.content-cards div.content-card *.bottom div.bottom-clip {
        height: calc(100% - 2.5rem - 1px);
        overflow: hidden; }
        div.content-cards div.content-card *.bottom div.bottom-clip:after {
          content: "";
          position: absolute;
          z-index: 10;
          bottom: 1.2rem;
          height: 5rem;
          left: 0;
          right: 0;
          background-color: var(--bottom-bg);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
          transition: bottom 0.3s ease-in-out; }
        div.content-cards div.content-card *.bottom div.bottom-clip.clip-js-up {
          height: calc(100% - 4rem - 1px); }
          div.content-cards div.content-card *.bottom div.bottom-clip.clip-js-up:after {
            bottom: 2.7rem; }
          div.content-cards div.content-card *.bottom div.bottom-clip.clip-js-up:before {
            content: "\e259 \e259 \e259";
            font-family: 'Glyphicons Halflings';
            text-align: center;
            position: absolute;
            z-index: 100;
            bottom: 0.75rem;
            left: 1.5rem;
            right: 1.5rem;
            opacity: 0.5; }
        div.content-cards div.content-card *.bottom div.bottom-clip.clip-none:after, div.content-cards div.content-card *.bottom div.bottom-clip.clip-js-down:after {
          bottom: -3rem; }
        div.content-cards div.content-card *.bottom div.bottom-clip div.collapse-button {
          display: none;
          position: relative;
          height: 1rem; }
          div.content-cards div.content-card *.bottom div.bottom-clip div.collapse-button:before {
            content: "\e260 \e260 \e260";
            font-family: 'Glyphicons Halflings';
            text-align: center;
            position: absolute;
            z-index: 100;
            bottom: -0.5rem;
            left: 1.5rem;
            right: 1.5rem;
            opacity: 0.5; }
        div.content-cards div.content-card *.bottom div.bottom-clip.clip-js-up div.collapse-button, div.content-cards div.content-card *.bottom div.bottom-clip.clip-js-down div.collapse-button {
          display: block; }
      div.content-cards div.content-card *.bottom div.text {
        font-size: 1rem; }
        div.content-cards div.content-card *.bottom div.text p {
          hyphens: auto; }
        div.content-cards div.content-card *.bottom div.text p:last-child {
          margin-bottom: 0; }
        div.content-cards div.content-card *.bottom div.text a {
          color: var(--link-text); }
          div.content-cards div.content-card *.bottom div.text a:hover {
            color: var(--link-text-hover); }
        div.content-cards div.content-card *.bottom div.text img {
          max-width: 100%;
          height: auto; }
    div.content-cards div.content-card.shrink-top *.top {
      aspect-ratio: 8 / 3; }
    div.content-cards div.content-card.shrink-top.width-3 *.top {
      /* Little Hack to adjust top height fit the 1/3 */
      margin-top: -0.75rem; }
      div.content-cards div.content-card.shrink-top.width-3 *.top div.tag-label {
        top: 1.75rem; }
    div.content-cards div.content-card.shrink-bottom *.bottom {
      aspect-ratio: revert; }
    div.content-cards div.content-card:hover div.content-card-inner div.link-hint:after,
    div.content-cards div.content-card:hover div.content-card-inner a.link-hint:after,
    div.content-cards div.content-card:hover a.content-card-inner div.link-hint:after,
    div.content-cards div.content-card:hover a.content-card-inner a.link-hint:after {
      background-color: var(--hint-bg-hover);
      color: var(--hint-text); }
    div.content-cards div.content-card:hover *.top div.tag-label {
      background-color: var(--hint-bg-hover);
      color: var(--hint-text); }
    div.content-cards div.content-card div.cms-controls {
      margin: 0 1.5rem; }

body:not(.js-ready) div.content-cards div.content-card div.content-card-inner:hover *.bottom div.bottom-clip, body:not(.js-ready) div.content-cards div.content-card div.content-card-inner:focus *.bottom div.bottom-clip {
  height: auto;
  overflow: visible;
  margin-bottom: 0; }
  body:not(.js-ready) div.content-cards div.content-card div.content-card-inner:hover *.bottom div.bottom-clip:after, body:not(.js-ready) div.content-cards div.content-card div.content-card-inner:focus *.bottom div.bottom-clip:after {
    display: none; }

@media all and (max-width: 1024px) {
  div.content-cards div.content-card {
    width: 50%; }
    div.content-cards div.content-card.width-3 {
      width: 100%; } }

@media all and (max-width: 800px) {
  div.content-cards div.content-card {
    width: 100%; }
    div.content-cards div.content-card.width-2 {
      width: 100%; }
    div.content-cards div.content-card.no-image *.top {
      aspect-ratio: revert;
      min-height: 4rem; }
      div.content-cards div.content-card.no-image *.top h4 {
        position: static;
        margin-top: 2.75rem; }
    div.content-cards div.content-card:not(.no-image) *.top {
      padding: 0; }
      div.content-cards div.content-card:not(.no-image) *.top h4 {
        position: absolute;
        bottom: 1.25rem;
        left: 1.5rem;
        right: 1.5rem;
        margin-bottom: 0; }
    div.content-cards div.content-card *.bottom {
      aspect-ratio: revert; } }

body.ls2-admin div.content-cards {
  margin: 0; }
  body.ls2-admin div.content-cards div.content-card div.content-card-inner,
  body.ls2-admin div.content-cards div.content-card a.content-card-inner {
    margin-bottom: 0; }

@media all and (max-width: 1300px) {
  body.ls2-admin div.content-cards div.content-card {
    width: 50%; } }