#who__we__are {
    .section__header {
        color: var(--secondary);
        text-align: center;
        grid-row: 2 / 3;
        margin: 1ch 0;
    }
    .section__left {
        grid-row: 3 / 4;
    }
}

#living__our__values {
    background-color: var(--slate);
    h1 {
        grid-row: 2 / 3;
        font-family: "Helvetica Neue LT Com";
        font-weight: 400;
        font-size: 4rem;
        color: var(--eggshell);
        max-width: 12ex;
        margin-right: 1ex;
    }
    p {
        grid-row: 2 / 3;
        color: white;
        align-self: center;
    }
    .values__container {
        grid-row: 3 / 4;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 4em;
        gap: 2em;
        .value {
            display: grid;
            grid-template-columns: [img-start] 1fr [value-middle] 2fr [text-end];
            max-width: 30em;
            .value-icon {
                display: flex;
                aspect-ratio: 1 / 1;
                grid-column: img-start / value-middle;
                margin: 1ex 3ex;
                padding: 10%;
                background-color: white;
                align-items: center;
                justify-content: center;
            }
            .value-text {
                display: flex;
                flex-direction: column;
                justify-content: center;
                h4 {
                    color: var(--highlight);
                    font-family: "Helvetica Neue LT Com";
                    font-weight: 400;
                    font-size: 1rem;
                    line-height: 3ch;
                }
                p {
                    color: white;
                }
            }
        }
    }
}

#authentic__journeys {
    background-image: url(/assets/images/graph.png);
    background-repeat: no-repeat;
    background-size: cover;
    .section__header {
        grid-row: 2 / 3;
        color: var(--eggshell);
        line-height: 4ch;
    }
    .tiles__wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, 50%);
        .tile {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 100%;
            max-width: 100%;
            height: 100%;
            align-self: stretch;
            justify-content: center;
            overflow: hidden;
            .tile-image {
                grid-area: 1 / 1 / 2 / 2;
                display: grid;
                grid-template-columns: 100%;
                grid-template-rows: 100%;
                justify-content: center;
                align-items: center;
                img {
                    height: 100%;
                    justify-self: center;
                    align-self: start;
                    grid-area: 1 / 1 / 2 / 2;
                }
                .gradient__overlay {
                    grid-area: 1 / 1 / 2 / 2;
                    content: ' ';
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(0deg, rgba(0, 45, 98, 0.6) 0%, rgba(0, 45, 98, 1) 100%);
                    opacity: 60%;
                }
            }
            .tile-overlay {
                grid-area: 1 / 1 / 2 / 2;
                display: flex;
                position: relative;
                flex-direction: column;
                justify-content: space-between;
                padding: 20px;
                .tile-icon {
                    height: 30px;
                    width: 30px;
                    top: 0px;
                    left: 0px;
                }
                .tile-text {
                    color: white;
                    &.black {
                        color: black;
                    }
                    .name {
                        font-family: "Helvetica Neue LT Com";
                        font-weight: 400;
                        font-size: 1.5rem;
                    }
                    .role {
                        font-weight: bold;
                    }
                    .description {
                        font-style: italic;
                    }

                }
            }
            &.square__tile {
                background-color: var(--slate);
                aspect-ratio: 1 / 1;
            }
            &.large__tile {
                background-color: var(--slate);
                aspect-ratio: 1 / 1;
                grid-column: span 2;
            }
            &.long__tile {
                background-color: var(--eggshell);
                aspect-ratio: 2 / 1;
                grid-column: span 2;
            }
            &.tall__tile {
                background-color: var(--highlight);
                aspect-ratio: 1 / 3;
                grid-row: span 3;
            }
        }
    }

    @media only screen and (min-width: 0rem) {
        .section__left,
        .section__right {
            grid-column: content-start / content-end;
        }
        .section__left {
            grid-row: 3 / 4;
        }
        .section__right {
            grid-row: 4 / 5;
        }
    }
    
    @media only screen and (min-width: 1000px) {
        .section__left {
            grid-column: content-start / content-middle;
        }
        .section__right {
            grid-column: content-middle / content-end;
        }
        .tiles__wrapper {
            grid-row: 3 / 4;
        }
    }
}