.cardset {
  @include reset-list;

  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.cardset__item {
  display: flex;
  flex-direction: column;
  width: calc(33.3333% - 40px);
  margin: 20px;

  h3 {
    margin: 0;
    font-size: 17px;
    line-height: 26px;
    font-weight: 400;
    color: #222;
  }

  .picture-wrp {
    padding-bottom: 75%;
  }

  &:hover {
    box-shadow: 0 5px 25px rgba(11, 28, 42, 0.15);
  }
}

.cardset__info {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  padding: 15px 25px;
  justify-content: space-between;
  color: #646464;
  font-size: 14px;
  line-height: 1.2;
  &_date {
    flex-basis: 50%;
  }
  &_views {
    position: relative;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: block;
      position: absolute;
      left: -23px;
      width: 18px;
      height: 12px;
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.84187 9.26344C9.7861 9.26344 10.5881 8.93296 11.2478 8.27199C11.9075 7.611 12.2374 6.80838 12.2374 5.86413C12.2374 4.9199 11.9069 4.11792 11.2459 3.45819C10.5849 2.79847 9.78232 2.46861 8.83807 2.46861C7.89384 2.46861 7.09186 2.7991 6.43214 3.46007C5.77242 4.12106 5.44255 4.92367 5.44255 5.86792C5.44255 6.81216 5.77304 7.61414 6.43401 8.27386C7.095 8.93358 7.89762 9.26344 8.84187 9.26344ZM8.83997 8.11603C8.21497 8.11603 7.68372 7.89728 7.24622 7.45978C6.80872 7.02228 6.58997 6.49103 6.58997 5.86603C6.58997 5.24103 6.80872 4.70978 7.24622 4.27228C7.68372 3.83478 8.21497 3.61603 8.83997 3.61603C9.46497 3.61603 9.99622 3.83478 10.4337 4.27228C10.8712 4.70978 11.09 5.24103 11.09 5.86603C11.09 6.49103 10.8712 7.02228 10.4337 7.45978C9.99622 7.89728 9.46497 8.11603 8.83997 8.11603ZM8.83997 11.6993C7.08571 11.6993 5.48128 11.2314 4.0267 10.2955C2.5721 9.3596 1.41105 8.1283 0.543534 6.60159C0.47409 6.48194 0.42334 6.36135 0.391284 6.23982C0.359228 6.11828 0.343201 5.99354 0.343201 5.86561C0.343201 5.73768 0.359228 5.61309 0.391284 5.49184C0.42334 5.37058 0.47409 5.25012 0.543534 5.13047C1.41105 3.60376 2.5721 2.37246 4.0267 1.43657C5.48128 0.500666 7.08571 0.0327148 8.83997 0.0327148C10.5942 0.0327148 12.1987 0.500666 13.6532 1.43657C15.1078 2.37246 16.2689 3.60376 17.1364 5.13047C17.2059 5.25012 17.2566 5.37071 17.2887 5.49224C17.3207 5.61378 17.3367 5.73851 17.3367 5.86644C17.3367 5.99438 17.3207 6.11897 17.2887 6.24022C17.2566 6.36148 17.2059 6.48194 17.1364 6.60159C16.2689 8.1283 15.1078 9.3596 13.6532 10.2955C12.1987 11.2314 10.5942 11.6993 8.83997 11.6993ZM8.83997 10.4494C10.4094 10.4494 11.8504 10.0362 13.1629 9.20978C14.4754 8.38339 15.4789 7.26881 16.1733 5.86603C15.4789 4.46325 14.4754 3.34867 13.1629 2.52228C11.8504 1.69589 10.4094 1.28269 8.83997 1.28269C7.27053 1.28269 5.82955 1.69589 4.51705 2.52228C3.20455 3.34867 2.20108 4.46325 1.50664 5.86603C2.20108 7.26881 3.20455 8.38339 4.51705 9.20978C5.82955 10.0362 7.27053 10.4494 8.83997 10.4494Z' fill='%23222222'/%3E%3C/svg%3E%0A");
    }
  }
  &_readtime {
    position: relative;
    display: flex;
    align-items: center;
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: -20px;
      width: 15px;
      height: 18px;
      background-image: url("data:image/svg+xml,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.12522 1.57442C5.94813 1.57442 5.7997 1.5145 5.67992 1.39467C5.56013 1.27482 5.50024 1.12632 5.50024 0.949172C5.50024 0.772005 5.56013 0.623596 5.67992 0.503943C5.7997 0.38429 5.94813 0.324463 6.12522 0.324463H9.55472C9.7318 0.324463 9.88023 0.384381 10 0.504214C10.1198 0.624061 10.1797 0.772561 10.1797 0.949713C10.1797 1.12688 10.1198 1.27529 10 1.39494C9.88023 1.51459 9.7318 1.57442 9.55472 1.57442H6.12522ZM7.84024 10.7892C8.0174 10.7892 8.16581 10.7293 8.28547 10.6095C8.40512 10.4897 8.46494 10.3413 8.46494 10.1642V6.73469C8.46494 6.55761 8.40503 6.40918 8.28519 6.2894C8.16535 6.16961 8.01685 6.10971 7.83969 6.10971C7.66253 6.10971 7.51412 6.16961 7.39447 6.2894C7.27481 6.40918 7.21499 6.55761 7.21499 6.73469V10.1642C7.21499 10.3413 7.2749 10.4897 7.39474 10.6095C7.51458 10.7293 7.66308 10.7892 7.84024 10.7892ZM7.83997 17.1994C6.86812 17.1994 5.95208 17.0135 5.09186 16.6417C4.23164 16.2699 3.47994 15.7625 2.83678 15.1193C2.19362 14.4761 1.68615 13.7244 1.31436 12.8642C0.942555 12.004 0.756653 11.088 0.756653 10.1161C0.756653 9.14426 0.942555 8.22823 1.31436 7.36801C1.68615 6.50778 2.19362 5.75609 2.83678 5.11292C3.47994 4.46977 4.23164 3.9623 5.09186 3.59051C5.95208 3.2187 6.86812 3.0328 7.83997 3.0328C8.67437 3.0328 9.47806 3.17436 10.251 3.45748C11.024 3.74061 11.7417 4.14606 12.404 4.67384L13.0034 4.07446C13.1188 3.95909 13.2638 3.90007 13.4385 3.8974C13.6132 3.89472 13.7609 3.95374 13.8816 4.07446C14.0023 4.1952 14.0627 4.34157 14.0627 4.51357C14.0627 4.68557 14.0023 4.83193 13.8816 4.95265L13.2822 5.55203C13.81 6.21442 14.2155 6.93209 14.4986 7.70505C14.7817 8.47802 14.9233 9.28171 14.9233 10.1161C14.9233 11.088 14.7374 12.004 14.3656 12.8642C13.9938 13.7244 13.4863 14.4761 12.8432 15.1193C12.2 15.7625 11.4483 16.2699 10.5881 16.6417C9.72785 17.0135 8.81181 17.1994 7.83997 17.1994ZM7.83997 15.9494C9.45108 15.9494 10.8261 15.38 11.965 14.2411C13.1039 13.1022 13.6733 11.7272 13.6733 10.1161C13.6733 8.505 13.1039 7.13 11.965 5.99111C10.8261 4.85222 9.45108 4.28278 7.83997 4.28278C6.22885 4.28278 4.85385 4.85222 3.71497 5.99111C2.57608 7.13 2.00663 8.505 2.00663 10.1161C2.00663 11.7272 2.57608 13.1022 3.71497 14.2411C4.85385 15.38 6.22885 15.9494 7.83997 15.9494Z' fill='%23222222'/%3E%3C/svg%3E%0A");
    }
  }
}

.cardset__description {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 15px 25px 5px;
  border-top: none;

  .button-link {
    min-width: unset;
    margin-top: auto;
    margin-left: 0;
    line-height: 26px;
  }

  .date {
    margin: 0;
    font-size: 14px;
    line-height: 19px;
    font-weight: 300;
    color: $color-pale-grey;

    > * {
      display: inline-block;
      vertical-align: middle;
    }

    svg {
      margin-right: 10px;
      fill: $color-pale-grey;
    }
  }
}
.cardset__intro {
  padding: 0 25px 25px;
  font-size: 14px;
  line-height: 1.5;
  color: #646464;
}

@include media('tablet-l') {
  .cardset__description {
    padding: 15px 25px 5px;

    .date {
      margin-bottom: 15px;
    }
  }
}

@include media('tablet-m') {
  .cardset {
    justify-content: space-between;
  }

  .cardset__item {
    width: calc(50% - 10px);
    margin: 0;

    &:nth-of-type(n+3) {
      margin-top: 20px;
    }
  }
}

@include media('tablet-s') {
  .cardset {
    padding-top: 6px;
  }

  .cardset__item {
    width: calc(50% - 8px);

    &:nth-of-type(n+3) {
      margin-top: 15px;
    }

    h3 {
      font-size: 16px;
      line-height: 26px;
    }

    .date {
      margin-bottom: 2px;
    }
  }

  .cardset__description {
    padding: 15px 25px 5px;

    .button-link {
      line-height: 20px;
      padding: 0 12px;
    }
  }
}

@include media('pre-mobile') {
  .cardset__item {
    width: 100%;

    &:nth-of-type(n+1) {
      margin-top: 15px;
    }
  }
}