.upk-fanel-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr); }
  .upk-fanel-list .upk-item {
    position: relative;
    overflow: hidden;
    transition: all .3s ease; }
    .upk-fanel-list .upk-item:hover {
      box-shadow: 0 0 10px rgba(43, 45, 66, 0.3); }
      .upk-fanel-list .upk-item:hover .upk-image-wrap .upk-img {
        transform: scale(1.1); }
    .upk-fanel-list .upk-item .upk-item-box {
      position: relative;
      display: flex;
      align-items: center;
      height: 100%; }
    .upk-fanel-list .upk-item .upk-image-wrap {
      position: relative;
      width: 40%;
      height: 100%;
      overflow: hidden; }
      .upk-fanel-list .upk-item .upk-image-wrap .upk-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 1s ease; }
    .upk-fanel-list .upk-item .upk-fanel-date-wrap {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 10px 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #fff; }
      .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-date {
        text-transform: capitalize;
        font-weight: 900;
        font-size: 18px;
        display: inline-flex;
        line-height: 1;
        color: #2B2D42;
        letter-spacing: 1px; }
      .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-month {
        color: #8D99AE;
        font-size: 14px;
        text-transform: capitalize;
        font-weight: 600; }
    .upk-fanel-list .upk-item .upk-content {
      position: relative;
      width: 60%;
      padding: 10px; }
      .upk-fanel-list .upk-item .upk-content.upk-readmore--yes {
        margin-bottom: 30px; }
    .upk-fanel-list .upk-item .upk-category {
      margin-bottom: 10px;
      display: inline-flex; }
      .upk-fanel-list .upk-item .upk-category a {
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        color: #8D99AE;
        text-transform: uppercase;
        transition: all .3s ease; }
        .upk-fanel-list .upk-item .upk-category a:hover {
          color: #EF233C; }
      .upk-fanel-list .upk-item .upk-category a + a {
        margin-left: 5px; }
    .upk-fanel-list .upk-item .upk-title {
      font-size: 16px;
      line-height: 1.3;
      font-weight: 700;
      text-transform: capitalize;
      margin: 0px; }
      .upk-fanel-list .upk-item .upk-title a {
        text-decoration: none;
        transition: all .3s ease;
        color: #2B2D42; }
        .upk-fanel-list .upk-item .upk-title a:hover {
          color: #EF233C; }
    .upk-fanel-list .upk-item .upk-text {
      display: none;
      font-size: 14px;
      font-weight: 400;
      color: #8D99AE;
      padding-top: 15px; }
      .upk-fanel-list .upk-item .upk-text p {
        margin: 0; }
    .upk-fanel-list .upk-item .upk-fanel-read-more {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 40px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: #EF233C;
      transition: all .3s ease;
      color: #fff;
      font-size: 20px; }
      .upk-fanel-list .upk-item .upk-fanel-read-more i {
        transition: transform .3s ease;
        transform: translateX(0);
        display: inline-flex; }
      .upk-fanel-list .upk-item .upk-fanel-read-more:hover {
        background: #D90429; }
        .upk-fanel-list .upk-item .upk-fanel-read-more:hover i {
          transform: translateX(5px); }
    .upk-fanel-list .upk-item .upk-fanel-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      position: relative;
      color: #8D99AE;
      font-size: 11px;
      line-height: 1;
      padding-top: 10px;
      font-weight: 500;
      text-transform: uppercase; }
      .upk-fanel-list .upk-item .upk-fanel-meta .upk-author-name-wrap {
        display: flex; }
        .upk-fanel-list .upk-item .upk-fanel-meta .upk-author-name-wrap .upk-by {
          font-weight: 700;
          padding-right: 6px; }
        .upk-fanel-list .upk-item .upk-fanel-meta .upk-author-name-wrap .upk-author-name {
          text-decoration: none;
          color: #8D99AE;
          font-weight: 500; }
      .upk-fanel-list .upk-item .upk-fanel-meta > div {
        position: relative;
        display: inline-flex; }
        .upk-fanel-list .upk-item .upk-fanel-meta > div:before {
          content: attr(data-separator);
          margin: 0 5px; }
        .upk-fanel-list .upk-item .upk-fanel-meta > div:nth-child(1)::before {
          display: none; }

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

@media (min-width: 768px) {
  .upk-fanel-list .upk-item .upk-content {
    padding: 20px; }
    .upk-fanel-list .upk-item .upk-content.upk-readmore--yes {
      margin-bottom: 40px; }
  .upk-fanel-list .upk-item .upk-category a {
    font-size: 12px; }
  .upk-fanel-list .upk-item .upk-text {
    display: inherit; }
  .upk-fanel-list .upk-item .upk-title {
    font-size: 20px;
    line-height: 1.4; }
  .upk-fanel-list .upk-item .upk-fanel-read-more {
    width: 60px;
    height: 40px;
    line-height: 40px; }
  .upk-fanel-list .upk-item .upk-fanel-meta {
    font-size: 12px;
    padding-top: 15px; } }

@media (min-width: 1024px) {
  .upk-fanel-list {
    grid-template-columns: repeat(2, 1fr); }
    .upk-fanel-list .upk-item .upk-content {
      padding: 30px; }
    .upk-fanel-list .upk-item .upk-fanel-date-wrap .upk-fanel-date {
      font-size: 20px; } }