.color-block {
    position: relative;
}

.image-cards {
    position: relative;
    z-index: 1;
}

.image-cards--homepage::before,
.color-block:before,
.color-block + .image-card-flex:before {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(100% - 79px);
    top: 0;
    left: 0;
    background: var(--color-tan);
    z-index: -1;
}

.color-block:before {
    height: calc(100% + 50px);
}

.image-cards--homepage {
    padding: 40px 0 34px 0;
}

.image-card-flex {
    padding: 0 22px var(--section-margins) 22px;
    position: relative;
}

.image-cards__heading + .image-card-flex {
    padding-top: 10px;
}

.image-cards--homepage .image-card-flex {
    padding-top: 23px;
}

.image-card-item {
    margin-top: 13px;
}

.image-card {
    position: relative;
    height: 100px;
    overflow: hidden;
}

.image-card img {
    object-position: 100% 75%;
}

.image-card__hover .desc {
    color: #fff;
    margin-top: 20px;
    opacity: 0;
}

@media (min-width: 768px) {
    .image-card img {
        object-position: center;
    }
}

.image-card__hover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 17px 72px 0 20px;
}

.image-card__hover::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 72px;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom,  rgba(38,35,31,1) 0%,rgba(38,35,31,0) 100%);
    z-index: -1;
    opacity: 0.6;
}

.image-card__title {
    color: var(--color-white);
    font-size: 24px;
    line-height: 1.125em;
    padding: 0;
}

.image-card__link  {
    position: absolute;
    right: 13px;
    bottom: 13px;
    background: rgba(27,100,65,0.9);
    width: 46px;
    height: 46px;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.image-card__link  a {
    color: var(--color-white);
    border: none;
    font-size: 19px;
    text-shadow: 0 0 2px #408B5A,;
}

.image-cards__headline {
    text-align: center;
}

.image-cards__title {
    padding-bottom: 24px;
}

.image-cards__bottom {
    padding-top: 23px;
}

.headlines {
    max-width: 1048px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .image-cards--homepage::before {
        height: calc(100% - 120px);
    }

    .color-block + .image-card-flex:before {
        height: calc(100% - 150px);
    }
    
    .image-cards--homepage {
        padding: 59px 0 54px 0;
    }

    .image-card-flex {
        padding: 0 52px 0 52px;
        margin: 0 -6px -12px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .image-cards__heading + .image-card-flex {
        padding-top: 12px;
    }

    .image-cards--homepage  .image-card-flex {
        padding-top: 23px;
    }
    
    .image-card-item {
        margin-top: 12px;
        margin-bottom: 12px;
        padding: 0 6px;
        width: 33.33%;
    }
    
    .image-card {
        height: 256px;
    }

    .image-card__hover {
        padding: 26px 20px 0 20px;
    }
    
    .image-card__hover::before {
        height: 157px;
    }

    .image-card__title {
        font-size: 28px;
    }

    .image-cards__bottom {
        padding-top: 46px;
    }
}


@media (min-width: 1200px) {
    .image-cards--homepage::before,
    .color-block:before,
    .color-block + .image-card-flex:before {
        height: 100%;
        width: calc(50% + 448px);
    }
    
    .image-cards--homepage {
        padding: 89px 0 75px 0;
    }

    .image-card-flex {
        padding:  0 0 0 0;
        margin: 0 -7px -14px;
    }

    .image-cards__heading + .image-card-flex {
        padding-top: 47px;
    }

    .image-cards--homepage  .image-card-flex {
        padding:  74px 0 0 0;
    }
    
    .image-card-item {
        margin-top: 0;
        padding: 0 7px;
        width: 20%;
        margin-bottom: 14px;
    }

    .image-card-flex--2 .image-card-item {
        width: 50%;
    }

    .image-card-flex--3 .image-card-item {
        width: 33.33%;
    }

    .image-card-flex--4 .image-card-item {
        width: 25%;
    }
    
    .image-card {
        height: 402px;
        position: relative;
    }

    .image-card img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .image-card__hover {
        padding: 30px 35px;
    }

    .image-card:hover .image-card__hover {
        overflow: auto;
    }

    .image-card:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--color-black);
        opacity: 0.19;
        position: absolute;
        top: 0;
        left: 0;
        transition: all .4s ease-in-out;
        z-index: 1;
    }
    
    .image-card__hover::before {
        display: none;
        height: 100%;
        background: var(--color-black);
        opacity: 0.19;
        transition: all .4s ease-in-out;
    }

    .image-card::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 157px;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom,  rgba(38,35,31,1) 0%,rgba(38,35,31,0) 100%);
        z-index: 1;
        opacity: 0.6;
    }

    .image-card__title {
        font-size: 28px;
    }

    .image-card__details {
        display: flex;
        flex-wrap: wrap;
        opacity: 0;
        transition: all .4s ease-in-out;
    }

    .image-card__hover {
        position: relative;
        z-index: 2;
    }

    .image-card__details a {
        display: block;
        background: var(--color-blue);
        border: none;
        margin-top: 9px;
        margin-right: 7px;
        font-size: 16px;
        color: var(--color-white);
        line-height: 1.5em;
        padding: 3px 9px;
        font-weight: 400;
    }

    .image-card__details a:hover {
        color: var(--color-blue);
        background: var(--color-white);
    }

    .image-card-flex--homepage .image-card-item:not(:first-child) .image-card__details a,
    .image-card-item:not(.image-card-item--pools) .image-card__details a {
        background-color: var(--color-green);
    }

    .image-card-flex--homepage .image-card-item:not(:first-child) .image-card__details a:hover,
    .image-card-item:not(.image-card-item--pools) .image-card__details a:hover {
        color: var(--color-green);
        background: var(--color-white);
    }

    .image-card:hover .image-card__details,
    .image-card:hover .desc {
        opacity: 1;
    }

    .image-card:hover::before {
        opacity: 0.6;
    }

    .image-cards__headline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        text-align: left;
    }

    .image-cards__headline .btn {
        width: 283px;
    }

    .image-cards__title {
        max-width: 732px;
    }

    .image-cards__title {
        padding-bottom: 0;
    }

    .image-card img {
        transition: all .8s ease-in-out;
    }

    .image-cards__bottom {
        padding-top: 37px;
    }
    
}

@media (min-width: 1366px) {
    .image-cards__title {
        max-width: 832px;
    }

    .image-card__title {
        font-size: 40px;
    }
}

.color-block + .image-card-flex {
    padding-bottom: var(--section-margins);
}

@media (min-width: 768px) {
    .color-block + .image-card-flex {
        padding-top: 0;
        margin-top: -20px;
        padding-bottom: var(--section-margins);
    }
}

@media (min-width: 1200px) {
    .color-block + .image-card-flex {
        padding-top: 0;
        padding-bottom: var(--section-margins);
        margin-top: -20px;
    }
}

@media (max-width: 1199px) {
    .image-card-item--pools .image-card__link,
    .image-card-item--pool .image-card__link {
        background-color: var(--color-blue);
    }
}

.image-card-flex--3 {
    max-width: 1260px;
    margin: 0 auto;
}