.post__blocks {
  background-color: #eeeeee;
  padding: 50px 0;
  .post__blocks-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .post__block {
      flex-basis: calc(25% - 22.5px);
      box-shadow: 0 0 10px 0 rgba(17, 17, 17, 0.3);
      .image__placeholder {
        min-height: 138px;
        display: flex;
        align-items: center;
        justify-content: center;
        &.blue {
          background-color: #00c8dc;
        }
        &.geek-green {
          background-color: #aadc33;
        }
        &.sw-orange {
          background-color: #ff6200;
        }
        &.yellow {
          background-color: #fbdc44;
        }
        a {
          img {
            position: relative;
            max-width: 144px;
            max-height: 100px;
          }
        }
      }
      .title__block {
        position: relative;
        padding: 13px 20px 14px 20px;
        background-color: #111111;
        &::before {
          position: absolute;
          content: "";
          background: url(../img/colorbar-S.png) no-repeat;
          width: 100%;
          height: 5px;
          left: 0;
          top: -5px;
        }
        a {
          font-family: "Roboto";
          font-size: 24px;
          font-weight: 500;
          line-height: normal;
          letter-spacing: 0.25px;
          color: #fff;
        }
      }
    }
  }
}

@media screen and (max-width: 991px) {
  .homepage__featured-post {
    .feature__post-grid {
      .featured__post-grid-item {
        &:last-child {
          display: none;
        }
      }
    }
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .post__blocks {
    .post__blocks-items {
      .post__block {
        flex-basis: calc(50% - 15px);
        &:first-child,
        &:nth-child(2) {
          margin-bottom: 30px;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .post__blocks {
    .post__blocks-items {
      .post__block {
        flex-basis: 100%;
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
          .image__placeholder {
            min-height: 170px;
          }
        }
        .title__block {
          a {
            font-size: 21px;
          }
        }
      }
    }
  }
}