.olymp-media {
  .card.card-block {
    border: none;
    float: left;
    min-height: 120px;
    min-width: 120px;
    max-width: 180px;
    width: 23.5%;
    margin: .75%;
    cursor: pointer;
    border-radius: 0;
    background-color: transparent;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, .75);

    &:before{
      content: "";
      display: block;
      padding-top: 100%; 	/* initial ratio of 1:1*/
    }

    &:hover {
      animation: none;
      transform: scale(1.1);
      transition: all .15s ease-in-out;
      z-index: 3;
    }

    .athena-img-container {
      width: calc(~'100% + 2px') !important;
      height: calc(~'100% + 2px') !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: @primary-color;
      color: #FFF;
      border-radius: 50%;
      text-align: center;
      font-size: 34px;
      padding-top: 3px;
      padding-left: 1px;
      width: 50px;
      height: 50px;
      line-height: 1.25;
      box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.75);
    }

    /* Jiggling-Animation */
    &.selected {
      transform: scale(1.1);

      &.multi {
        animation-name: jiggle;
        animation-iteration-count: infinite;
        animation-duration: 1.2s;
        transform-origin: 50% 50%;
        z-index: 2;

        &:hover {
          opacity: 1;
        }

        @keyframes jiggle {
          0% {
            transform: rotate(-2deg) scale(1.05);
            animation-timing-function: linear;
          }
          50% {
            transform: rotate(2deg) scale(1.05);
            animation-timing-function: linear;
          }
          100% {
            transform: rotate(-2deg) scale(1.05);
            animation-timing-function: linear;
          }
        }
      }
    }
  }
}