.custom-vc-blocks {
  border-radius: var(--bb-block-radius);
  border-top: 10px solid var(--color-black);
  background: var(--color-white);
  box-shadow: 1px 1px 3px 0 #cecccc;
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: middle;
}

.custom-vc-blocks.vc-block-single-post {
  .eltd-bnl-holder .eltd-layout-title-holder {
    margin-bottom: 22px;
  }
  .eltd-section-title-holder {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    box-sizing: border-box;
    border-bottom: 1px solid #dddcdc;
    padding: 8px 24px 3px;
  }
  .eltd-section-title-holder > .eltd-st-title {
    font-family: 'Old Standard TT', serif;
    font-size: 34px;
    line-height: 1.3em;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -3px;
    margin: 0;
  }
  .eltd-bnl-holder .eltd-bnl-outer {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
  }
  .eltd-bnl-holder .eltd-bnl-outer .eltd-bnl-inner {
    padding: 0;
    margin: 0 -12px;
  }
  .eltd-bnl-holder .eltd-bnl-outer .eltd-bnl-inner > .eltd-post-block-part {
    display: inline-block;
    position: relative;
    float: left;
    padding: 0 22px;
    vertical-align: middle;
    max-width: 100%;
  }
  .eltd-bnl-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item {
    display: inline-block;
    position: relative;
    float: left;
    vertical-align: middle;
    box-sizing: border-box;
    width: 100%;
    padding: 0 12px;
  }
  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item .eltd-pattern-background-holder {
    overflow: hidden;
    width: 180px;
    height: 180px;
    position: absolute;
    bottom: 0;
    right: -11px;
  }
  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item .eltd-pattern-background-holder .eltd-pattern-background {
    transform: rotate(45deg) translateX(70%);
    width: 100%;
    height: 100%;
    transition: all .2s;
  }

  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item .eltd-pattern-background-holder .eltd-pattern-background span {
    width: calc(100% / 18);
    border-left: 1px solid #ededed;
    outline: 1px solid transparent;
    height: 100%;
    display: block;
    float: left;
    box-sizing: border-box;
    transition: all .2s;
  }
  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item:hover .eltd-pattern-background {
    transform: rotate(45deg) translateX(80%);
    transition: all .3s ease;
  }
  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item:hover .eltd-pattern-background span:nth-child(1) {
    transition-delay: 0s;
  }
  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item:hover .eltd-pattern-background span {
    border-left-color: #bababa;
  }
  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item .eltd-post-item-inner > * {
    position: relative;
    z-index: 10;
  }
  .eltd-bnl-holder .eltd-pt-image-holder {
    position: relative;
    overflow: hidden;
  }
  .eltd-bnl-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item .eltd-post-item-inner .eltd-pt-image-link img {
    display: block;
    transition: transform .4s ease;
    backface-visibility: hidden;
    will-change: transform;
    outline: 1px solid transparent;
  }
  .eltd-bnl-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-one-item:hover .eltd-pt-image-holder img, .eltd-bnl-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item:hover .eltd-pt-image-holder img {
    transform: scale(1.05);
  }
  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item .eltd-post-item-inner {
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
  }
  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item .eltd-post-item-inner .eltd-pt-image-holder {
    width: 100%;
    max-width: 400px;
    border-radius: var(--bb-block-radius);
    overflow: hidden;
  }
  .eltd-bnl-holder.eltd-block-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item.eltd-pt-three-item .eltd-post-item-inner .eltd-pt-content-holder {
    width: calc(100% - 400px - 20px);
  }

  .eltd-bnl-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item .eltd-post-item-inner .eltd-post-info-category a,
  .eltd-bnl-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item .eltd-post-item-inner .eltd-post-info-date a {
    font-family: Roboto, serif;
    color: #7e7c7c;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1em;
    margin-bottom: 10px;
    transition: color 200ms ease-in-out;

    &:hover {
      color: var(--color-black);
    }
  }

  .eltd-bnl-holder .eltd-bnl-outer .eltd-bnl-inner .eltd-post-item .eltd-post-item-inner .eltd-pt-title {
    font-family: Oswald, serif;
    font-size: 28px;
    line-height: 1.192857142857143em;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 10px;

    a {
      transition: opacity 200ms ease-in-out;

      &:hover {
        opacity: 0.5;
      }
    }
  }
}

/**
 * Homepage post grid
 */
body.home-page {
  .wpb-post-grid {
    .wpb-post-grid-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;

      .wpb-post-grid-item {
        background: var(--color-white);
        border-top: 5px solid var(--color-black);
        border-radius: var(--bb-block-radius);
        box-shadow: 1px 1px 3px 0 #cecccc;
        padding: 20px;

        .post-featured-image {
          overflow: hidden;
          border-radius: 5px;
          margin-bottom: 10px;

          img {
            width: 100%;
            height: 270px;
            object-fit: cover;
            object-position: center;
            border-radius: 5px;
            transition: transform 200ms ease-in-out;
          }

          a:hover img {
            transform: scale(1.05);
          }
        }
        .post-categories {
          line-height: 1em;
          margin-bottom: 5px;
          a {
            font-family: Roboto, serif;
            color: #7e7c7c;
            font-size: 12px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 1px;
            line-height: 1em;
            transition: color 200ms ease-in-out;

            &:hover {
              color: var(--color-black);
            }

            &:after {
              content: ',';
            }
            &:last-child:after {
              display: none;
            }
          }
        }

        .post-title {
          margin-bottom: 5px;
          a {
            font-family: Mukta, serif;
            font-size: 21px;
            font-weight: 700;
            line-height: 1.136em;
            transition: opacity 200ms ease-in-out;

            &:hover {
              opacity: 0.5;
            }
          }
        }

        .post-date {
          font-family: Roboto, serif;
          color: #7e7c7c;
          font-size: 12px;
          font-weight: 400;
          text-transform: uppercase;
          letter-spacing: 1px;
          line-height: 1em;

          a {
            transition: color 200ms ease-in-out;

            &:hover {
              color: var(--color-black);
            }
          }
        }
      }
    }
    .show-more-posts {
      width: 150px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-top: 50px;
      margin-bottom: 20px;
    }
  }
}