body {
    color: #2B3236;
    background: #F5F5F2;
}
#modal {
    background: #11120de6;
}
#modal span {
    color: #F5F5F2;
}
#modalBody {
    background: #F5F5F2;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
}
#modalBody.oneCol #modalLeft {
    display: none;
}
#modalLeft {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    flex: 1;
}
#modalLeftImg {
    max-width: 100%;
    max-height: 100%;
    border-radius: 3px;
}
#scrollImgCont {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    flex: 2;
    border-radius: 3px;
}
#modalBody.oneCol #scrollImgCont {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px;
}
#scrollImg {
    border-radius: 3px;
}
#modalBody.oneCol #scrollImgCont img {
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25));
}
#heroGradient {
    background-color: #F5F5F2;
    background: linear-gradient(90deg, rgba(245, 245, 242, 1) 13%, rgba(245, 245, 242, .75) 20%, rgba(245, 245, 242, 0) 43%);
}
#heroImage img {
    object-fit: cover;
    object-position: top; 
}
.rowCont {
    width: 100%;
    margin: 0;
    background-color: #C7CEC0;
}
#tahiDSIntro {
    padding: 128px 0;
}
#tahiDSIntro > div {
    grid-column: 1 / 13;
    margin: 0 16px;
}
#sxDesignSystem {
    position: relative;
    grid-column: 1 / 13;
    margin: 0 16px;
}
#ds-underlay {
    position: absolute;
    width: 100%;
    transition: opacity 750ms;
}
#ds-overview {
    position: relative;
    width: 100%;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.25));
}
.sxLibraryFocus {
    position: absolute;
    cursor: pointer;
}
.sxLibraryFocus img {
    transition: all 500ms ease;
    transform: scale(1.03);
    width: 100%;
}
.sxLibraryFocus:hover img {
  transform: scale(1.05);
}
#sxDesignSystem:hover #ds-underlay {
    opacity: 0;
}
#dsCaption {
    grid-column: 1 / 13;
    grid-row: 2;
    margin: 32px 16px 96px 16px;
}
#sxModalControls {
    display: flex;
    margin: 40px auto 24px auto;
    gap: 4px;
    justify-content: center;
}
.sxModalSwitch {
    cursor: pointer;
    border-radius: 36px;
    margin: 0 4px;
    height: 40px;
    width: 40px;
    background: #d9dbd6;
    border: 4px solid #ffffff;
    box-shadow: 0 5px 12px rgba(0,0,0,0.3);
    color: #2B3236;
}
.sxModalSwitch.current {
    background-color: #3C693A;
    color: #F5F5F2;
}
#sxModalPrev, #sxModalNext {
    cursor: pointer;
    border: none;
    height: 40px;
    width: 24px;
    background: none;
    background-repeat: no-repeat;
    background-position: center;
    opacity: .75;
}
#sxModalPrev {
    background-image: url("../images/icon-chevron-left.svg");
}
#sxModalNext {
    background-image: url("../images/icon-chevron-right.svg");
}
.projectImage {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 1px 6px #878787);
}
#sxProjectImage {
    margin-bottom: 24px;
}
#sxModalDesc {
    grid-column: 1 / span 13;
    grid-row: 1;
    margin: 0 16px;
}
#sxModalImage {
    grid-column: 1 / span 13;
    grid-row: 2;
    margin: 0 16px;
}
#sxConclusion {
    padding: 128px 0;
}
#sxConclusion .gridImgColL {
    margin-right: 16px;
}
#sxConclusion .gridTextColR {
    margin-left: 16px;
}

@media (min-width: 767px) {
    #tahiDSIntro > div {
        grid-column: 1 / 7;
    } 
    #modalBody {
        flex-direction: row;
    }
}
@media (min-width: 959px) {
    #tahiDSIntro > div {
        grid-column: 2 / 7;
        margin: 0;
    }
    #sxDesignSystem {
        grid-column: 2 / 12;
        margin: 0;
    }
    #dsCaption {
        grid-column: 3 / 11;
        margin: 32px 0;
    }
    #sxModalDesc {
        grid-column: 2 / span 5;
        margin: 0 32px 0 0;
    }
    #sxModalImage {
        grid-column: 7 / span 5;
        margin: 0 0 0 32px;
        grid-row: 1;
    }
    #sxConclusion .gridImgColL {
        margin-right: 32px;
    }
    #sxConclusion .gridTextColR {
        margin-left: 32px;
    }
}
@media (min-width: 1279px) {
    #tahiDSIntro > div {
        grid-column: 3 / 7;
    }
}
@media (max-width: 766px) {
    #heroImage img {
        width: 135%;
        max-width: none;
        object-position: 62% top;
        transform: translate(-13%, -12px);
        height: calc(100% + 12px);
    }
}