.ArticleListComponent {
  padding: 5rem 0;
  position: relative; }
  .ArticleListComponent::before {
    content: '';
    background-image: url(/images/sketch_2.svg?ba09da5326d082c34c8e8b9c05cd2311);
    background-repeat: no-repeat;
    position: absolute;
    background-size: 40rem;
    z-index: 0;
    top: 0;
    bottom: 0; }
  .ArticleListComponent::before {
    background-position: left top;
    right: 0;
    left: -15rem; }
  .ArticleListComponent article {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden; }
  .ArticleListComponent a.button {
    width: 105%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: #fff;
    padding: 1.8rem 2rem 2rem 5rem;
    height: 6rem;
    position: relative;
    font-weight: 700;
    display: block;
    line-height: 1.2rem;
    margin-left: -15px;
    margin-right: -15px;
    cursor: pointer; }
    .ArticleListComponent a.button:after {
      content: ' ';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 2rem;
      background-image: url(/images/arrow_gray.svg?86ee9cd565e99c8e2bc0af1198c57a9c);
      background-repeat: no-repeat;
      background-position: center; }
    .ArticleListComponent a.button > div {
      position: absolute;
      left: 1rem;
      top: 1rem;
      bottom: 1rem;
      border-left: 10px solid;
      border-image-slice: 1;
      border-width: 5px;
      border-image-source: linear-gradient(0deg, #972f3f 0%, #1b437b 100%);
      padding: 1rem .5rem;
      font-weight: 600;
      float: left; }
      .ArticleListComponent a.button > div.icon {
        background-repeat: no-repeat;
        background-size: 2.5rem;
        width: 3.3rem;
        background-position-y: 0.5rem;
        background-position-x: 0.5rem; }
        .ArticleListComponent a.button > div.icon1 {
          background-image: url(/images/icon_book.svg?8ac2c8931f4f909b89b0569625bf85c4); }
        .ArticleListComponent a.button > div.icon2 {
          background-image: url(/images/icon_members.svg?43312e5902ffa5e339f3c9e2884fcd6f); }
        .ArticleListComponent a.button > div.icon3 {
          background-image: url(/images/icon_announcements.svg?0dcb3a00e2d6df26264bd5d01a914214); }
        .ArticleListComponent a.button > div.icon4 {
          background-image: url(/images/icon_law.svg?118dd9c3ae3fbb27522abe5ecc67c7be); }
    .ArticleListComponent a.button:hover {
      background-color: #c1282a;
      color: #FFFFFF; }
      .ArticleListComponent a.button:hover > div {
        border-image-source: linear-gradient(0deg, #ffffff 0%, #ffffff 100%); }
        .ArticleListComponent a.button:hover > div.icon1 {
          background-image: url(/images/icon_book_white.svg?ba96a4d222367b0ffb4376cdd2fb822f); }
        .ArticleListComponent a.button:hover > div.icon2 {
          background-image: url(/images/icon_members_white.svg?b73927d4877d235a3ab71aac08b9150a); }
        .ArticleListComponent a.button:hover > div.icon3 {
          background-image: url(/images/icon_announcements_white.svg?3a8e0d0a7adbda03b3cfcf660feb3fc5); }
        .ArticleListComponent a.button:hover > div.icon4 {
          background-image: url(/images/icon_law_white.svg?fc2e035d54df8a87af9472919c1f2038); }
  .ArticleListComponent a.article {
    display: inline-block;
    background-color: #FFFFFF;
    padding: 0 0 1rem 0;
    width: 100%;
    height: 31rem; }
  .ArticleListComponent a .image {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 14rem; }
  .ArticleListComponent a h5 {
    margin-top: 1rem;
    padding: 0 1rem;
    color: #0E2F61; }
  .ArticleListComponent a h6 {
    color: #515150; }
  .ArticleListComponent a:hover {
    text-decoration: none;
    background-color: #eeeeee; }
  .ArticleListComponent a .link {
    color: #c1282a;
    font-weight: 600;
    text-decoration: underline; }
  .ArticleListComponent .page-item > a {
    padding: .5rem 1rem;
    margin: .3rem;
    height: auto;
    border-image-slice: 1;
    border-width: 5px;
    border-image-source: linear-gradient(0deg, #972f3f 0%, #1b437b 100%);
    width: 10rem;
    text-align: center; }
    .ArticleListComponent .page-item > a:hover {
      font-weight: 300; }