.upk-harold-list .upk-list-wrap {
  display: grid;
  grid-gap: 20px; }

.upk-harold-list .upk-item {
  position: relative;
  overflow: hidden;
  display: flex;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e8ecf3;
  transition: all .3s ease; }
  .upk-harold-list .upk-item .upk-item-box {
    display: flex; }
    .upk-harold-list .upk-item .upk-item-box .upk-image-wrap {
      max-width: 100px;
      min-width: 100px;
      width: 100%;
      display: flex; }
      .upk-harold-list .upk-item .upk-item-box .upk-image-wrap .upk-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px; }
    .upk-harold-list .upk-item .upk-item-box .upk-content {
      display: flex;
      align-items: center;
      padding: 10px; }
      .upk-harold-list .upk-item .upk-item-box .upk-content .upk-category {
        margin-bottom: 10px; }
        .upk-harold-list .upk-item .upk-item-box .upk-content .upk-category a {
          text-transform: capitalize;
          color: #8D99AE;
          font-size: 10px;
          padding: 3px 7px;
          text-transform: uppercase;
          font-weight: 600;
          border-radius: 4px;
          line-height: 1;
          transition: all .3s ease; }
          .upk-harold-list .upk-item .upk-item-box .upk-content .upk-category a:hover {
            border: 1px solid #EF233C;
            color: #EF233C; }
        .upk-harold-list .upk-item .upk-item-box .upk-content .upk-category a + a {
          margin-left: 5px; }
      .upk-harold-list .upk-item .upk-item-box .upk-content .upk-title {
        font-size: 16px;
        font-weight: 600;
        margin: 0px;
        padding-bottom: 10px;
        text-transform: capitalize; }
        .upk-harold-list .upk-item .upk-item-box .upk-content .upk-title a {
          transition: all .3s ease;
          text-decoration: none;
          color: #2B2D42; }
          .upk-harold-list .upk-item .upk-item-box .upk-content .upk-title a {
            text-decoration: none;
            background-image: linear-gradient(currentColor, currentColor);
            background-position: 0% 100%;
            background-repeat: no-repeat;
            background-size: 0% 2px;
            transition: background-size .3s; }
          .upk-harold-list .upk-item .upk-item-box .upk-content .upk-title a:hover, .upk-harold-list .upk-item .upk-item-box .upk-content .upk-title a:focus {
            background-size: 100% 2px;
            color: #EF233C; }
      .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta {
        display: flex;
        align-items: center;
        font-size: 11px; }
        .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta .upk-post-time,
        .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta .upk-author a,
        .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta .upk-date {
          text-transform: uppercase;
          font-weight: 500;
          color: #8D99AE;
          display: flex;
          align-items: center;
          line-height: 1; }
          .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta .upk-post-time i,
          .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta .upk-author a i,
          .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta .upk-date i {
            margin-right: 5px; }
        .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta .upk-date {
          margin-left: 10px; }
        .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta .upk-post-time {
          margin-left: 5px; }
          .upk-harold-list .upk-item .upk-item-box .upk-content .upk-meta .upk-post-time i {
            margin-right: 2px; }

.upk-global-link-yes .upk-harold-list .upk-item:hover {
  cursor: pointer; }

@media (min-width: 768px) {
  .upk-harold-list .upk-item {
    padding: 20px; }
    .upk-harold-list .upk-item .upk-item-box .upk-image-wrap {
      max-width: 130px;
      min-width: 130px; }
    .upk-harold-list .upk-item .upk-item-box .upk-content {
      padding: 20px; }
      .upk-harold-list .upk-item .upk-item-box .upk-content .upk-category {
        margin-bottom: 15px; }
        .upk-harold-list .upk-item .upk-item-box .upk-content .upk-category a {
          padding: 4px 10px; }
      .upk-harold-list .upk-item .upk-item-box .upk-content .upk-title {
        font-size: 20px;
        padding-bottom: 15px; } }