.three-feet-deep {
    --tfd-bg: #171720;
    --tfd-text: #fff;
    --tfd-link: #ed008c;
    --tfd-link-hover: #fff;
    --tfd-inner: 1400px;
    --tfd-column-one-image-width: 100%;
    --tfd-background-desktop-width: 55%;
    --tfd-background-mobile-width: 78%;
    --tfd-pad-top: 60px;
    --tfd-pad-bottom: 60px;
    --tfd-legal-bg: #fff;
    --tfd-legal-text: #111;
    --tfd-legal-link: #111;
    --tfd-legal-hover: #ed008c;
    --tfd-legal-pad-top: 24px;
    --tfd-legal-pad-bottom: 24px;
    display: block;
    width: 100%;
}

.three-feet-deep *,
.three-feet-deep *::before,
.three-feet-deep *::after { box-sizing: border-box; }

.three-feet-deep__main {
    background: var(--tfd-bg);
    color: var(--tfd-text);
    overflow: hidden;
    position: relative;
}

.three-feet-deep__background {
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: right bottom;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    right: 0;
    user-select: none;
    width: var(--tfd-background-desktop-width);
    z-index: 0;
}

.three-feet-deep__background--mobile { display: none; }

.three-feet-deep__inner {
    margin-inline: auto;
    max-width: var(--tfd-inner);
    padding: var(--tfd-pad-top) 24px var(--tfd-pad-bottom);
    position: relative;
    width: 100%;
    z-index: 1;
}

.three-feet-deep__columns {
    align-items: start;
    display: grid;
    gap: clamp(30px, 5vw, 80px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.three-feet-deep--center-columns .three-feet-deep__columns { align-items: center; }

.three-feet-deep__column { min-width: 0; }
.three-feet-deep__column-image {
    display: block;
    height: auto;
    max-width: 100%;
    width: var(--tfd-column-one-image-width);
}
.three-feet-deep__column > :first-child { margin-top: 0; }
.three-feet-deep__column > :last-child { margin-bottom: 0; }
.three-feet-deep__main h1,
.three-feet-deep__main h2,
.three-feet-deep__main h3,
.three-feet-deep__main h4,
.three-feet-deep__main h5,
.three-feet-deep__main h6,
.three-feet-deep__main p,
.three-feet-deep__main li { color: inherit; }
.three-feet-deep__main a { color: var(--tfd-link); transition: color 180ms ease; }
.three-feet-deep__main a:hover,
.three-feet-deep__main a:focus-visible { color: var(--tfd-link-hover); }
.three-feet-deep img:not(.three-feet-deep__background) { height: auto; max-width: 100%; }

.three-feet-deep__legal {
    background: var(--tfd-legal-bg);
    color: var(--tfd-legal-text);
}

.three-feet-deep__legal-inner {
    margin-inline: auto;
    max-width: var(--tfd-inner);
    padding: var(--tfd-legal-pad-top) 24px var(--tfd-legal-pad-bottom);
    text-align: center;
}

.three-feet-deep__legal-inner > :first-child { margin-top: 0; }
.three-feet-deep__legal-inner > :last-child { margin-bottom: 0; }
.three-feet-deep__legal-inner p {
    align-items: center;
    color: inherit;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    row-gap: 10px;
}
.three-feet-deep__legal-inner a {
    color: var(--tfd-legal-link);
    text-decoration: none;
    transition: color 180ms ease;
    white-space: nowrap;
}
.three-feet-deep__legal-inner a:hover,
.three-feet-deep__legal-inner a:focus-visible { color: var(--tfd-legal-hover); }
.three-feet-deep__legal-inner a + a::before {
    color: var(--tfd-legal-hover);
    content: "•";
    display: inline-block;
    margin: 0 18px;
}

@media (max-width: 760px) {
    .three-feet-deep--mobile-image .three-feet-deep__background--desktop { display: none; }
    .three-feet-deep__background--mobile { display: block; }
    .three-feet-deep__background { width: var(--tfd-background-mobile-width); }
    .three-feet-deep__inner { padding-left: 20px; padding-right: 20px; }
    .three-feet-deep__columns { gap: 34px; grid-template-columns: 1fr; }
    .three-feet-deep__legal-inner { padding-left: 20px; padding-right: 20px; }
}