#profiles-list {
  ldp-form {
    background-color: #F3F3F3;
  }

  ldp-display {
    display:      block;
    margin-top:   40px;
  }
}

@media (min-width: $md-with) {
  #profiles-list {
    display:          flex;
    flex-wrap:        wrap;
    justify-content:  center;

    ldp-form {
      flex-basis: 100%;
    }

    ldp-display {
      cursor:         pointer;
      margin-right:   20px;
      margin-bottom:  20px;
      position:       relative;

      &, img {
        width:      250px;
        max-width:  initial;
        min-width:  initial;
      }

      &::before,
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: scale3d(0, 0, 1);
        transition: transform .3s ease-out 0s;
        background: rgba(255, 255, 255, .075);
        content: '';
        pointer-events: none;
      }

      &::before {
        transform-origin: left top;
      }

      &::after {
        transform-origin: right bottom;
      }

      &:hover,
      &:focus {
        &::before,
        &::after {
          transform: scale3d(1, 1, 1);
        }
      }
    }
  }
}