.component-image-title-and-text {
    padding: 15px;
    .title, .name, .location {
        color: $light-grey;
        text-transform: uppercase;
        font-size: 1.25rem;
        letter-spacing: 2px;
        text-align: center;
        margin-bottom: 0;
    }
    .title {
        @include media-breakpoint-down(sm) {
            padding-top: 1.5rem;
        }
    }
    .sub-title {
        color: $light-grey;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 2px;
        text-align: center;
        margin-bottom: 0;
        padding: 0 4rem;
    }
}

.component-image-title-and-text.left, .component-image-title-and-text.right {
    .divider {
        padding-top: 1rem;
        padding-bottom: 2.5rem;
        @include media-breakpoint-down(sm) {
            padding-top: 0;
            padding-bottom: 1.5rem;
        }
        &:after {
            width: 19rem;
        }
    }
}

.component-image-title-and-text.center {
    .divider {
        padding-bottom: 1rem;
    }
}

.component-image-title-and-text.full-width {
    .title {
        color: #A3C9B0;
        font-family: 'itc-avant-garde-gothic-pro', sans-serif;
        font-weight: 500;
        font-style: normal;;
        text-transform: initial;
    }
    .divider {
        &:after {
            width: 100%;
        }
    }
    .text {
        p {
            font-family: 'neue-haas-grotesk-display';
            font-size: 0.85rem;
            margin-bottom: 0;
        }
    }
}

.component-image-title-and-text.right-with-link {
    .divider {
        &:after {
            margin: initial;
            width: 18.5rem;
        }
    }
    .link {
        text-align: center;
        .divider {
            &:after {
                padding: 0;
                width: 95%;
            }
        }
        a {
            color: $light-grey;
            font-size: 1.15rem;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
    }
    .title {
        text-align: left;
    }
}

.component-image-title-and-text.team, .component-image-title-and-text.supporting-contractors {
    padding: 0;
    .team-member {
        margin: 3.5rem 0;
        padding: 2rem 10rem;
        @include media-breakpoint-down(sm) {
            margin: 1rem;
            padding: 1rem 2rem;
        }
        .row {
            padding-top: 15px;
            padding-bottom: 15px;
        }
        &:last-child {
            margin-bottom: 1rem;
        }
        .name {
            @include media-breakpoint-down(sm) {
                padding-bottom: 1rem;
            }
        }
        .sub-title {
            @include media-breakpoint-up(md) {
                padding: 0 4rem;
            }
            @include media-breakpoint-down(sm) {
                padding: 0 2rem 1rem;
            }
        }
        .divider:after {
            @include media-breakpoint-down(sm) {
                padding-top: 0;
            }
        }

    }
    .text {
        @include media-breakpoint-up(md) {
            padding-top: 1.5rem;
        }
        @include media-breakpoint-down(sm) {
            padding-top: 1rem;
        }
    }
}

.team-primary {
    .team-member {
        background: $primary;
    }
}

.team-grey {
    .team-member {
        background: $silver;
    }
}

.component-image-title-and-text.associations {
    .col-md-6 {
        padding: 3rem;
        .overlay-image {
            padding: 3rem;
        }
        .divider {
            &:after {
                margin-bottom: 1.5rem;
            }
        }
    }
}