.templates-wrapper {
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
}

.library-wrapper {
  text-align: center;

  .header h1 {
    margin: 0;
  }
}

.close-modal{
  padding: 0;
  cursor: pointer;
  background: 0 0;
  border: 0;
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .2;

  &:hover, &:focus{
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .5;
  }
}

h4 {
  margin: 0;
}
.listing-demo .site-box {
  margin: 0 auto;
  border-color: $primary;
  box-shadow: 0 0 10px -5px transparentize($primary, 0);
}
.site-box {
  border: 1px solid #ccc;
  margin-bottom: 25px;
  .preview-image {
    position: relative;
  }
  .preview-action {
    opacity:0;
    position: absolute;
    display: flex;
    top:0;
    bottom:0;
    width: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all .3s ease;
    &:hover {
      opacity: 1;
    }
    > span {
      background: #23282d;
      background: rgba(0,0,0,.7);
      color: #fff;
      font-size: 15px;
      text-shadow: 0 1px 0 rgba(0,0,0,.6);
      -webkit-font-smoothing: antialiased;
      font-weight: 600;
      padding: 15px 12px;
      text-align: center;
      border-radius: 3px;
      transition: opacity .1s ease-in-out;
    }
  }
  .footer {
    position: relative;
    border-top: 1px solid #ccc;
    display: flex;
    padding: 15px;
    flex-wrap: wrap;
    align-items: center;
  }

  .theme-actions {
    opacity: 0;
    display: block;
    position: absolute;
    right: 0;
    padding: 10px 15px;
    background-color: rgba(244, 244, 244, 0.7);
    border-left: 1px solid rgba(0, 0, 0, 0.05);
  }

  &:hover .footer .theme-actions,
  &:focus-within .footer .theme-actions {
    opacity: 1;
  }

  .demo-pro {
    position: relative;

    &:after {
      content: "Pro";
      position: absolute;
      top: 0;
      right: 0;
      color: #fff;
      font-weight: 600;
      background-color: $error;
      line-height: 1;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-right: 0;
      border-top: 0;
      border-bottom-left-radius: 5px;
      padding: 5px;
      box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.22);
    }
  }
}


@mixin layout--laptop() {
  .templates-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    > div {
      flex: 49%;
      max-width: 49%;

      &:nth-child(odd) {
        margin-right: 2%;
      }
    }
  }
}

@mixin layout--desktop() {
  .templates-wrapper {
    > div {
      flex: 32%;
      max-width: 32%;
      margin-right: 2%;
      &:nth-child(3n+3) {
        margin-right: 0;
      }
    }
  }
}