.BlogCard {
  position: relative;
}

  .BlogCard:hover .BlogCard-Photo .Picture {
      opacity: 0.8;
    }

  .BlogCard:hover .BlogCard-Title {
      color: var(--color-blue-primary-light);
    }

  .BlogCard:hover .BlogCard-Button .Button {
        color: var(--color-blue-primary-light);
      }

  .BlogCard:active .BlogCard-Photo .Picture {
      opacity: 0.7;
    }

  .BlogCard:active .BlogCard-Title {
      color: var(--color-blue-primary-dark);
    }

  .BlogCard:active .BlogCard-Button .Button {
        color: var(--color-blue-primary-dark);
      }

  .BlogCard_view_feed.BlogCard_size_l {
          --card-photo-space-bottom: var(--space-xl);
          --card-date-space-bottom: var(--space-m);
        }

  @media screen and (max-width: 767px) {

  .BlogCard_view_feed.BlogCard_size_l {
            --card-photo-space-bottom: var(--space-m);
            --card-date-space-bottom: var(--space-2s)
        }
          }

  .BlogCard_view_feed.BlogCard_size_s,
        .BlogCard_view_feed.BlogCard_size_xs {
          --card-photo-space-bottom: var(--space-xl);
        }

  @media screen and (max-width: 767px) {

  .BlogCard_view_feed.BlogCard_size_s,
        .BlogCard_view_feed.BlogCard_size_xs {
            --card-photo-space-bottom: var(--space-m)
        }
          }

  .BlogCard_view_feed.BlogCard_size_s .BlogCard-DescriptionSmall, .BlogCard_view_feed.BlogCard_size_xs .BlogCard-DescriptionSmall {
            margin-top: 0;
          }

  .BlogCard_view_feed.BlogCard_direction_row {
        --card-photo-space-bottom: 0;
      }

  @media screen and (max-width: 1199px) {

  .BlogCard_view_feed.BlogCard_direction_row {
          --card-photo-space-bottom: var(--space-m)
      }
        }

  .BlogCard_view_feed.BlogCard_direction_row .BlogCard-Photo {
          width: 50%;
        }

  @media screen and (max-width: 1199px) {

  .BlogCard_view_feed.BlogCard_direction_row .BlogCard-Photo {
            width: 100%
        }
          }

  .BlogCard_view_feed.BlogCard_direction_row .BlogCard-Body {
          width: 46.590909%;
          margin-left: auto;
          position: relative;
        }

  @media screen and (max-width: 1199px) {

  .BlogCard_view_feed.BlogCard_direction_row .BlogCard-Body {
            width: 100%
        }
          }

  .BlogCard_view_feed.BlogCard_direction_row .BlogCard-Date {
          margin-bottom: var(--space-m);
        }

  .BlogCard_view_feed.BlogCard_direction_row .BlogCard-Tags {
          margin-top: var(--space-m);
        }

  @media screen and (min-width: 768px) and (max-width: 1199px) {

  .BlogCard_view_feed.BlogCard_direction_row .BlogCard-Tags {
            margin-top: var(--space-s)
        }
          }

  .BlogCard_view_text2 {
      --card-photo-space-bottom: var(--space-xl);
      --card-date-space-bottom: var(--space-m);
    }

  @media screen and (max-width: 767px) {

  .BlogCard_view_text2 {
        --card-photo-space-bottom: var(--space-m);
        --card-date-space-bottom: var(--space-2s)
    }
      }

  .BlogCard_view_filled {
      height: 100%;
      background: #fff;
      border-radius: 16px;
      -webkit-box-shadow: 0 4px 8px 0 rgba(157, 167, 170, 0.16), 0 14px 30px 0 rgba(157, 167, 170, 0.08);
              box-shadow: 0 4px 8px 0 rgba(157, 167, 170, 0.16), 0 14px 30px 0 rgba(157, 167, 170, 0.08);
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }

  .BlogCard_view_filled:hover {
        -webkit-box-shadow: 0px 14px 30px rgba(157, 167, 170, 0.2), 0px 4px 8px rgba(157, 167, 170, 0.3);
                box-shadow: 0px 14px 30px rgba(157, 167, 170, 0.2), 0px 4px 8px rgba(157, 167, 170, 0.3);
      }

  .BlogCard_view_filled .BlogCard-Photo {
        border-radius: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
      }

  .BlogCard_view_filled .BlogCard-Photo .Picture picture {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }

  .BlogCard_view_filled .BlogCard-Body {
        padding: var(--space-xl) var(--space-2xl) var(--space-2xl);
        margin-bottom: 52px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column;
      }

  @media screen and (max-width: 767px) {

  .BlogCard_view_filled .BlogCard-Body {
          padding: var(--space-xl) var(--space-xl) var(--space-l);
          margin-bottom: 115px
      }
        }

  .BlogCard_view_filled .BlogCard-Title > * {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          max-height: 96px;
        }

  .BlogCard_view_filled .BlogCard-Button {
        margin: var(--space-xl) var(--space-2xl) var(--space-xl);
      }

  @media screen and (max-width: 767px) {

  .BlogCard_view_filled .BlogCard-Button {
          margin: 96px var(--space-xl) var(--space-xl)
      }
        }

  .BlogCard_direction_column {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column;
              flex-flow: column;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
    }

  .BlogCard_direction_row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-flow: wrap;
          flex-flow: wrap;
    }

  .BlogCard-DescriptionSmall {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-m);
  }

  .BlogCard-Title {
    -webkit-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
  }

  .BlogCard-Photo {
    margin-bottom: var(--card-photo-space-bottom);
    border-radius: 2px;
    -webkit-box-shadow: 0 4px 8px 0 rgba(157, 167, 170, 0.16), 0 14px 30px 0 rgba(157, 167, 170, 0.08);
            box-shadow: 0 4px 8px 0 rgba(157, 167, 170, 0.16), 0 14px 30px 0 rgba(157, 167, 170, 0.08);
    overflow: hidden;
    position: relative;
  }

  .BlogCard-Photo .Picture {
      -webkit-transition: 0.3s all ease-in-out;
      transition: 0.3s all ease-in-out;
    }

  .BlogCard-Date {
    margin-bottom: var(--card-date-space-bottom);
  }

  .BlogCard-Link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    cursor: pointer;
  }

  .BlogCard-Tags {
    margin-top: var(--space-m);
    margin-left: calc(var(--space-xs) * -1);
    margin-right: calc(var(--space-xs) * -1);
    margin-bottom: calc(var(--space-xs) * -1);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: wrap;
        flex-flow: wrap;
  }

  @media screen and (min-width: 768px) and (max-width: 1199px) {

  .BlogCard-Tags {
      margin-top: var(--space-s)
  }
    }

  @media screen and (max-width: 767px) {

  .BlogCard-Tags {
      margin-top: var(--space-2s);
      margin-left: calc(var(--space-2xs) * -1);
      margin-right: calc(var(--space-2xs) * -1);
      margin-bottom: calc(var(--space-2xs) * -1)
  }
    }

  .BlogCard-Tags:first-child {
      margin-top: 0;
    }

  .BlogCard-Tags + .BlogCard-Title {
      margin-top: var(--space-xs);
    }

  .BlogCard-Tags .BlogCard-Tag {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 0 var(--space-xs) var(--space-xs);
    }

  @media screen and (max-width: 767px) {

  .BlogCard-Tags .BlogCard-Tag {
        margin: 0 var(--space-2xs) var(--space-2xs)
    }
      }

  .BlogCard-Button {
    padding-top: calc(var(--space-2xl) - 4px);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 11;
  }
