.pub {
  padding: 0.75rem 1.5rem;

  @media only screen and (max-width: 600px) {
    padding: 1rem;
  }

  &__section {
    @include flexbox();
    @include flex-direction(column);
  }
  
  &__toolbar {
    &--search {
      width: 240px;
      padding: 0 0.5rem;
      margin-right: 1rem;
      
      @media only screen and (max-width: 600px) {
        width: 100%;
      }
    }
  }

  &__list {
    margin: 1rem 0;
  }

  &__item {
    margin: 1rem;
    padding: 0.5rem 0;

    @include flexbox();
    @include flex-direction(column);
    @media only screen and (max-width: 600px) {
      margin: 1rem 0;
    }

    a {
      @include themify($themes) {
        color: themed('title-color');
        @include on-event {
          color: themed('link-hover');
        }
      }
    }
  }

  &__meta {
    margin: 0 0.25rem;
    display: inline-block;

    @include themify($themes) {
      color: themed('meta-color');
    }
  }

  &__summary {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  &__btn {
    padding: 0 0.4rem;
    border-radius: 0.2rem;
    
    @include themify($themes) {
      color: themed('body-color') !important;
      background-color: themed('donation-background-color');
      @include on-event {
        background-color: darken(themed('donation-background-color'), 5%);
      }
    }
  }

  &__metas {
    margin-top: 0.25rem;

    @include flexbox();
    @include flex-wrap(wrap);
  }

  &__tags {
    display: inline-block;
    list-style-type: none;
    z-index: z('card-outter');

    @include flexbox();
    @include align-items(center);
  }

  &__tag {
    padding: 0 0.25rem;
    @include themify($themes) {
      color: themed('link') !important;
      @include on-event {
        color: themed('link-hover') !important;
      }
    }
  }

  &__box {
    width: 100%;
    height: auto;
    border-radius: 0.2rem;
    padding: 1rem;
    position: relative;

    @include flexbox();
    @include flex-grow(1);
    @include flex-direction(column);
    @include justify-content(flex-start);
    @include themify($themes) {
      border: 1px solid themed('content-box-border-color');
      background-color: themed('body-background-color');
    }

    @include on-event {
      @include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));
      background-color: rgba(125, 125, 125, 0.1);
    }

    &--title {
      font-size: 1rem;
      font-family: $title-font;
      
      @include themify($themes) {
        color: themed('title-color');
      }
    }

    &--desc {
      font-size: 0.9rem;
      margin: 0.5rem 0;
    }

    &--links {
      width: 100%;
      font-size: 0.9rem;

      @include flexbox();
      @include flex-wrap(wrap);

      a {
        margin: 0.125rem;
        z-index: z('card-outter');
        
        @include themify($themes) {
          color: themed('meta-color');
          text-decoration: none;

          @include on-event {
            color: themed('link-hover');
          }
        }
      }

      &[data-dir="ltr"] {
        a:not(.pub__tag) {
            &:first-child {
            margin-right: 1rem;
          }
        }
      }
      &[data-dir="rtl"] {
        a:not(.pub__tag) {
            &:first-child {
            margin-left: 1rem;
          }
        }
      }
    }
  }
}

.pgrid {
  position: relative;
  margin-bottom: 1rem;

  .full {
    width: 100%;
  }

  .half {
    width: 50%;
  }
}

/* clear fix */
.pgrid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.pgrid-sizer {
  padding: 0.5rem;
}

.pgrid-sizer,
.pgrid-item {
  width: 49.5%;
}

.pgrid-item {
  float: left;
  border-radius: 0.25rem;
  padding: 0.51rem;
  position: relative;
  opacity: 1;
  height: auto;
  cursor: pointer;
}

.pgrid-item img {
  display: block;
  max-width: 100%;
}