.card-showcase-layover {
  position: relative;
  background: $color-white;
  box-shadow: 0 0 0 1px $color-gray-10;
  padding: 32px;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
  cursor: pointer;

  .card-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .aws-member-image {
      margin: 0 auto; //center the rounded image
    }

    .aws-member-image {
      width: 96px; //following 8px grid
      height: 96px;
      overflow: hidden;
      border-radius: 100%; //to create a rounded image

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .card-body {
      padding:32px 0 0;

      .member-name {
        font-size:20px; //slightly bigger name than normal content
        min-height:30px; //to keep the layout intact when a name is missing
      }

      .member-function {
        font-size:14px; //slightly smaller text for secondary text in card.
        line-height:1.7;
        min-height:24px;//to keep the layout intact when a position text is missing
      }
    }
  }

  &.card.is-inactive {

    .card-inner {
      cursor: pointer;
    }
  }

  &.is-expanded .inner-info:before {
    display: none;
  }
}


.team-showcase .card-showcase-default.card.is-inactive .card-inner {
  opacity: 0.5; //lower visibility for inactive card to have a better focus on opened card.
}

[data-card-action="layover"] {

  .card-showcase-layover {

    .card-inner {

      &:hover .card-body:before {
        bottom: 12px;
        transition: bottom 0.45s ease, opacity 0.45s ease .25s;
        opacity: 1;
      }

    }

    .card-body {
      &::before {
        content: "";
        width: 12px;
        height: 12px;
        position: absolute;
        display: block;
        left: calc(50% - 10px);
        bottom: -20px;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDA5LjYgNDA5LjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwOS42IDQwOS42OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5Mi41MzMsMTg3LjczM0gyMjEuODY3VjE3LjA2N0MyMjEuODY3LDcuNjQxLDIxNC4yMjYsMCwyMDQuOCwwcy0xNy4wNjcsNy42NDEtMTcuMDY3LDE3LjA2N3YxNzAuNjY3SDE3LjA2Nw0KCQkJQzcuNjQxLDE4Ny43MzMsMCwxOTUuMzc0LDAsMjA0LjhzNy42NDEsMTcuMDY3LDE3LjA2NywxNy4wNjdoMTcwLjY2N3YxNzAuNjY3YzAsOS40MjYsNy42NDEsMTcuMDY3LDE3LjA2NywxNy4wNjcNCgkJCXMxNy4wNjctNy42NDEsMTcuMDY3LTE3LjA2N1YyMjEuODY3aDE3MC42NjdjOS40MjYsMCwxNy4wNjctNy42NDEsMTcuMDY3LTE3LjA2N1M0MDEuOTU5LDE4Ny43MzMsMzkyLjUzMywxODcuNzMzeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat;
        background-size: contain;
        filter: contrast(0.2);
        opacity: 0;
        transition: opacity 0.45s ease, bottom 0.45s ease .25s;
      }
    }
  }
}