.cards__wrapper {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.cards-wall {

  &.cards {
    padding: 0 0 80px;

  }

  .card {
    height: 350px;
    margin: 0 5% 20px;
    border-radius: 4%;

    @include breakpoint($screen-md) {
      max-width: span(4 of 12);
      margin: 0 1.25% 20px;
    }

    &--family {
      background: url($image-path + "myself-friends-family.jpg") center/cover no-repeat;
    }

    &--school {
      background: url($image-path + "nursery-school.jpg") 0 0/cover no-repeat;
    }

    &--work {
      background: url($image-path + "workplace-organisation.jpg") 0 0/cover no-repeat;
    }

    &--youth {
      background: url($image-path + "youth-university.jpg") 0 0/cover no-repeat;
    }

    a {
      display: block;
      height: 100%;
      width:100%;

      &:hover {
        transition: background-color 0.2s linear;
        background-color: rgba(6,29,56,0.5);
      }
    }

    .cards__content {

      .cards__title {
        background-color: $colour-white;
        opacity: 0.9;
        position: absolute;
        bottom: -15px;
        width:100%;
      }
      h3 {
        color: $colour-black;
        font-family: $montserrat;
        @include font-size($h4-font-size);
        font-weight: bold;
        left: auto;
        right: auto;
        padding:20px 30px 20px;
        text-align: center;
      }

    }
  }

}