.VideoCard {
  position: relative;
}

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

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

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

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

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

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

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

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

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

  .VideoCard_view_feed.VideoCard_size_s,
        .VideoCard_view_feed.VideoCard_size_xs {
          --card-photo-space-bottom: var(--space-xl);
        }

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

  .VideoCard_view_feed.VideoCard_size_s,
        .VideoCard_view_feed.VideoCard_size_xs {
            --card-photo-space-bottom: var(--space-m)
        }
          }

  .VideoCard_view_feed.VideoCard_size_s .VideoCard-DescriptionSmall, .VideoCard_view_feed.VideoCard_size_xs .VideoCard-DescriptionSmall {
            margin-top: 0;
          }

  .VideoCard_view_feed.VideoCard_size_s {
          --card-date-space-bottom: var(--space-m);
        }

  .VideoCard_view_feed.VideoCard_direction_row {
        --card-photo-space-bottom: 0;
      }

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

  .VideoCard_view_feed.VideoCard_direction_row {
          --card-photo-space-bottom: var(--space-m)
      }
        }

  .VideoCard_view_feed.VideoCard_direction_row .VideoCard-Photo {
          width: 50%;
        }

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

  .VideoCard_view_feed.VideoCard_direction_row .VideoCard-Photo {
            width: 100%
        }
          }

  .VideoCard_view_feed.VideoCard_direction_row .VideoCard-Body {
          width: 46.590909%;
          margin-left: auto;
          position: relative;
        }

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

  .VideoCard_view_feed.VideoCard_direction_row .VideoCard-Body {
            width: 100%
        }
          }

  .VideoCard_view_feed.VideoCard_direction_row .VideoCard-Date {
          margin-bottom: var(--space-m);
        }

  .VideoCard_view_feed.VideoCard_direction_row .VideoCard-Tags {
          margin-top: var(--space-m);
        }

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

  .VideoCard_view_feed.VideoCard_direction_row .VideoCard-Tags {
            margin-top: var(--space-s)
        }
          }

  .VideoCard_view_feed.VideoCard_direction_row .VideoCard-Button {
          position: absolute;
          bottom: 0;
          left: 0;
        }

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

  .VideoCard_view_feed.VideoCard_direction_row .VideoCard-Button {
            position: relative
        }
          }

  .VideoCard_view_filled.VideoCard_direction_row {
        --card-photo-space-bottom: 0;
      }

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

  .VideoCard_view_filled.VideoCard_direction_row {
          --card-photo-space-bottom: var(--space-m)
      }
        }

  .VideoCard_view_filled.VideoCard_direction_row .VideoCard-Photo {
          width: 50%;
        }

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

  .VideoCard_view_filled.VideoCard_direction_row .VideoCard-Photo {
            width: 100%
        }
          }

  .VideoCard_view_filled.VideoCard_direction_row .VideoCard-Body {
          width: 46.590909%;
          position: relative;
        }

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

  .VideoCard_view_filled.VideoCard_direction_row .VideoCard-Body {
            width: 100%
        }
          }

  .VideoCard_view_filled.VideoCard_direction_row .VideoCard-Date {
          margin-bottom: var(--space-m);
        }

  .VideoCard_view_filled.VideoCard_direction_row .VideoCard-Tags {
          margin-top: var(--space-m);
        }

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

  .VideoCard_view_filled.VideoCard_direction_row .VideoCard-Tags {
            margin-top: var(--space-s)
        }
          }

  .VideoCard_view_filled .VideoCard-Button {
        position: absolute;
        bottom: 0;
        left: 0;
      }

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

  .VideoCard_view_filled .VideoCard-Button {
          position: relative
      }
        }

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

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

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

  .VideoCard_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;
    }

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

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

  .VideoCard-Photo:not(:last-child) {
      margin-bottom: var(--card-photo-space-bottom);
    }

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

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

  .VideoCard-BottomDescription {
    border-top: 1px solid var(--color-gainsboro);
    padding-top: var(--space-m);
    width: 100%;
  }

.VideoCard_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);
    }

.VideoCard_view_filled .VideoCard-Photo {
        border-radius: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
      }

.VideoCard_view_filled .VideoCard-Photo .Picture picture {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }

.VideoCard_view_filled .VideoCard-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) {

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

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

.VideoCard_view_filled .VideoCard-Button {
        margin: var(--space-xl) var(--space-2xl) var(--space-xl);
      }

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

.VideoCard_view_filled .VideoCard-Button {
          margin: 96px var(--space-xl) var(--space-xl)
      }
        }

.VideoCard_view_row-filled {
      -ms-flex-flow: wrap;
          flex-flow: wrap;
      background-color: #fff;
      border-radius: 16px;
      overflow: hidden;
      -webkit-box-shadow: 0 14px 30px 0 rgba(157, 167, 170, 0.08),
        0 4px 8px 0 rgba(157, 167, 170, 0.16);
              box-shadow: 0 14px 30px 0 rgba(157, 167, 170, 0.08),
        0 4px 8px 0 rgba(157, 167, 170, 0.16);
    }

.VideoCard_view_row-filled .VideoCard-Photo {
        width: 35.643564%;
        margin-bottom: 0 !important;
      }

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

.VideoCard_view_row-filled .VideoCard-Photo {
          width: 100%;
          margin-bottom: var(--space-m)
      }
        }

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

.VideoCard_view_row-filled .VideoCard-Photo {
          width: 100%;
          margin-bottom: var(--space-m)
      }
        }

.VideoCard_view_row-filled .VideoCard-Body {
        width: 64.356436%;
        margin-left: 0;
        padding: var(--space-xl);
      }

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

.VideoCard_view_row-filled .VideoCard-Body {
          width: 100%
      }
        }

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

.VideoCard_view_row-filled .VideoCard-Body {
          width: 100%
      }
        }

.VideoCard_view_row-filled .VideoCard-Date {
        margin-bottom: var(--space-m);
      }

.VideoCard_view_row-filled .VideoCard-Tags {
        margin-top: var(--space-m);
      }

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

.VideoCard_view_row-filled .VideoCard-Tags {
          margin-top: var(--space-s)
      }
        }

.VideoCard-Photo {
    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;
  }

.VideoCard-Photo-Button {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: 2;
    }

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

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

.VideoCard-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) {

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

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

.VideoCard-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)
  }
    }

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

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

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

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

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

.VideoCard-Button {
    padding-top: calc(var(--space-2xl) - 4px);
    z-index: 11;
  }

.Modal-Window.VideoCard-Modal {
  max-width: 1016px;
  max-height: 570px;
}

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

.Modal-Window.VideoCard-Modal {
    max-width: 688px;
    max-height: 386px
}
  }

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

.Modal-Window.VideoCard-Modal {
    max-width: 288px;
    max-height: 162px
}
  }
