.card-list {
  --hover-offset: 20px;
  .card {
    width: 100%;
    padding: 0 0 20px 0;
    &:hover {
      .image-window {
        height: calc(230px + var(--hover-offset));;
        img {
          width: 110%;
          max-width: 110%;
          margin-left: -5%;
          /* filter: brightness(1.10); */
        }
      }
      figcaption {
        padding-top: calc(44px - var(--hover-offset));
        h5 {
          color: var(--color-agMain-hover);
        }
      }
    }
  }
  .card figure {
    margin: 0;
    box-shadow: 0px 0px 14px 1px rgba(85, 90, 98, 0.12);
    border-radius: 8px;
    img {
      width: 100%;
    }
    .image-window {
      height: 230px;
      border-radius: 8px 8px 0 0;
    }
    figcaption {
      padding:44px 22px;
      h5 {
        margin-bottom: 0.5em;
      }
    }
  }
}


/* Phone Breakpoint (phone & tablet) */
@media (min-width: 0px) AND (max-width: 992px) {
  .card .image-window {
    height: 260px !important;
  }
}

/* Phone Breakpoint (phone ONLY) */
@media (min-width: 0px) AND (max-width: 767px) {
  .card .image-window {
    height: 360px !important;
  }
}