.group.card-group {
  padding-top: calculateRem(100);
  padding-right: calculateRem(25);
  padding-bottom: calculateRem(100);
  padding-left: calculateRem(25);
  position: relative;
  background-color: $light;
  justify-content: center;

  .row.card-row {
    background-color: $light;
    padding-top: calculateRem(25);
    padding-right: calculateRem(25);
    padding-bottom: calculateRem(25);
    padding-left: calculateRem(25);

    &:not(.animated) {
      @include breakpoint(laptop) {
        visibility: hidden;
      }
    }

    .card {
      height: 100%;
      box-shadow: 0 6px 10px 0 rgba(0,0,0,0.11);
      .image-container {
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        .image {
          width: 100%;
          transition: all 1s ease-out;
          &:hover {
            transform: scale(1.1);
          }
          &::after {
            content: "";
            padding-top: 66%;
            width: 100%;
            position: relative;
            display: block;
          }
        }
      }
      .card-content {
        padding-top: calculateRem(35);
        padding-right: calculateRem(15);
        padding-bottom: calculateRem(20);
        padding-left: calculateRem(15);
        &.center-text {
          text-align: center;
        }
        p {
          margin-bottom: 0;
        }
      }
    }
  }
}
