// VARS
$font-size: 16px;
$font-size-topics: 16px;
$font-size-headline: 24px;
$min-grid-item-width: 470px;
$breakpoint-sm: 767px;
$breakpoint-md: 991px;
$breakpoint-l: 1199px;

.chps-grid {
  padding: 30px;
  max-width: 100% !important;

  // FILTERBAR
  .chps-filterbar {
    display: flex;
    justify-content: center;
    padding-bottom: 8px;
    font-size: $font-size;
    text-transform: uppercase;

    .chps-filter-label {
      margin-right: 12px;
    }

    .chps-filter-items {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .chps-filter-item {
        cursor: pointer;
        border: 1px solid;
        padding: 1px 5px;
        border-radius: 3px;
        outline: none;
        margin-right: 12px;
        margin-bottom: 12px;

        &:hover {
          box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        }
      }
    }
  }

  //GRID
  .chps-grid-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax($min-grid-item-width, 1fr));
    padding-bottom: 12px;

    @media (max-width: $breakpoint-sm) {
      grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }

    .chps-grid-item {
      transition: all 0.3s ease;

      >div {
        padding-top: 66%;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;

        >a {
          text-decoration: none;
          display: block;
          overflow: hidden;
          position: absolute;
          z-index: 2;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transition: background 0.3s ease-out;

          .chps-inner-content {
            position: absolute;
            overflow: hidden;
            top: 25px;
            right: 33%;
            bottom: 25px;
            left: 25px;

            .chps-text {
              display: block;
              position: absolute;
              z-index: 2;
              top: 0;
              bottom: 0;
              width: 100%;
              transition: all 0.3s ease-out;

              .chps-topics {
                font-size: $font-size-topics;
                padding: 10px 10px 0;
                text-transform: uppercase;
                line-height: 1.6;
              }

              .chps-headline {
                padding: 2px 10px 6px;
                text-transform: uppercase;
                font-size: $font-size-headline;
                line-height: 1.16;
              }

              .chps-short_description {
                position: absolute;
                padding: 10px;
                font-size: $font-size;
                line-height: 1.6;
                height: 0;

                @media (max-width: $breakpoint-sm) {
                  display: none;
                }
              }
            }
          }

          &:hover {
            .chps-inner-content {
              .chps-text {
                transform: translateY(0) !important;
              }
            }
          }
        }
      }

      &.chps-load-more-item {
        display: none;
      }

      &.chps-hidden {
        transform: scale(0);
      }
    }
  }

  //BRANDING
  .chps-branding {
    text-align: center;

    a {
      color: red;
      text-decoration: none;
      font-size: 15px;
    }
  }

  // LOAD MORE BUTTON
  .chps-load-more-btn {
    margin: 30px auto 13px;
    background: none;
    border: 1px solid;
    padding: 5px 25px;
    border-radius: 3px;
    outline: none;
    text-transform: uppercase;

    &:hover {
      box-shadow: 0 0 3px;
    }
  }
}

.chps-alert {
  padding: 2rem;
  border: 2px solid;
  margin: 1rem 0;
}