.gabby-landing {
    color: #252525;
}

.gabby-landing h1,
.gabby-landing h2,
.gabby-landing h3,
.gabby-landing p {
    letter-spacing: 0;
}

.gabby-hero {
    background-color: #dfc0e0;
    height: 29rem;
    min-height: 0;
    overflow: hidden;
    padding: 3rem 0 0;
    position: relative;
}

.gabby-landing .gabby-hero > .zf-row,
.hour-of-code-activity-page.gabbys-dollhouse .activity-hero > .zf-row {
    margin-left: auto;
    margin-right: auto;
    max-width: 75rem;
    position: relative;
    z-index: 1;
}

.gabby-hero__content {
    max-width: 37rem;
    padding-bottom: 0;
}

.gabby-landing .gabby-hero h1 {
    color: #fff;
    font-size: 3.3rem;
    font-weight: 600;
    line-height: 1.16;
    margin-bottom: 1.25rem;
}

.gabby-landing .gabby-hero__intro {
    color: #fff;
    font-size: 1.24rem;
    font-weight: 500;
    line-height: 1.42;
    margin-bottom: 0.8rem;
}

.gabby-hero__art {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.gabby-hero__content {
    position: relative;
    z-index: 1;
}

.gabby-hero__art img {
    display: block;
    height: auto;
    position: absolute;
    user-select: none;
}

.gabby-hero__series {
    color: #1d1d1d;
    font-size: 0.78rem;
    font-weight: 500;
    left: calc((100% - 75rem) / 2 + 68.25rem);
    letter-spacing: 0;
    line-height: 1;
    position: absolute;
    text-align: center;
    top: 3.2rem;
    width: 14rem;
    z-index: 2;
}

.gabby-hero__art-logo {
    left: calc((100% - 75rem) / 2 + 68.1rem);
    right: auto;
    top: 4.1rem;
    width: 14.5rem;
}

.gabby-hero__netflix {
    left: calc((100% - 75rem) / 2 + 71.45rem);
    letter-spacing: 0;
    line-height: 1;
    position: absolute;
    top: 8.85rem;
    width: 7.8rem;
    z-index: 2;
}

.gabby-hero__art-dj {
    left: calc((100% - 75rem) / 2 + 48.75rem);
    right: auto;
    top: 3.6rem;
    transform: rotate(30deg);
    transform-origin: 50% 50%;
    width: 22rem;
}

.gabby-hero__art-kitty {
    left: calc((100% - 75rem) / 2 + 39rem);
    right: auto;
    top: 3.6rem;
    width: 14rem;
}

.gabby-hero__art-cakey {
    bottom: 0.5rem;
    left: calc((100% - 75rem) / 2 + 44.1rem);
    right: auto;
    width: 16.4rem;
}

.gabby-hero__art-catrat {
    bottom: 1.5rem;
    left: calc((100% - 75rem) / 2 + 58.9rem);
    right: auto;
    transform: rotate(8deg);
    width: 14rem;
}

.gabby-hero__art-babybox {
    bottom: 0.9rem;
    left: calc((100% - 75rem) / 2 + 68.5rem);
    right: auto;
    width: 15rem;
}

.gabby-cta {
    background: linear-gradient(135deg, #f27b00 0%, #df004f 100%);
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin: 0.35rem 0 1rem;
    padding: 0.9rem 1.25rem;
    text-transform: uppercase;
}

.gabby-cta:hover,
.gabby-cta:focus {
    background: linear-gradient(135deg, #ff8a00 0%, #c90052 100%);
    color: #fff;
}

.gabby-hero__note {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-style: italic;
    left: max(1rem, calc((100% - 75rem) / 2 + 1rem));
    margin-bottom: 0;
    position: absolute;
    bottom: 0.75rem;
    z-index: 1;
}

.gabby-hero__copyright {
    bottom: 0.75rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    left: max(1rem, calc((100% - 75rem) / 2 + 44rem));
    margin: 0;
    position: absolute;
    right: max(1rem, calc((100% - 75rem) / 2 + 1rem));
    text-align: right;
    white-space: nowrap;
}

.gabby-overview {
    background: #fff;
    padding: 5.5rem 0 3.5rem;
}

.gabby-overview .zf-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.gabby-preview {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    margin: 0 auto 2rem;
    max-width: 43rem;
    padding: 1.15rem 1.15rem 0.9rem;
}

.gabby-preview__slider {
    background-color: #8e3547;
    overflow: hidden;
}

.gabby-preview__slider:not(.slick-initialized) .gabby-preview__slide:not(:first-child) {
    display: none;
}

.gabby-preview__slide img {
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
    width: 100%;
}

.gabby-preview__caption {
    background: #5e676a;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.6rem 0.85rem;
}

.gabby-preview__thumbs {
    display: flex;
    gap: 0.65rem;
    padding: 1rem 0.1rem 0.45rem;
}

.gabby-preview__thumb {
    -webkit-appearance: none;
    appearance: none;
    aspect-ratio: 16 / 9;
    background-color: #e3d6e8;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 4px solid transparent;
    cursor: pointer;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    position: relative;
}

.gabby-preview__thumb:hover,
.gabby-preview__thumb:focus {
    border-color: #41ba62;
    outline: none;
}

.gabby-preview__thumb.is-active {
    border-color: #149a42;
}

.gabby-preview__thumb.is-active::before {
    border-bottom: 0.7rem solid #149a42;
    border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;
    content: "";
    left: 50%;
    position: absolute;
    top: -0.8rem;
    transform: translateX(-50%);
}

.gabby-preview__scroll {
    background: #d6d6d6;
    border-radius: 2rem;
    height: 0.45rem;
    margin: 0 auto;
    width: 98%;
}

.gabby-overview__copy h2 {
    color: #101010;
    font-size: 2.45rem;
    font-weight: 700;
    line-height: 1.18;
}

.gabby-overview__copy p {
    color: #333;
    font-size: 1.2rem;
    line-height: 1.55;
}

.gabby-projects {
    background: #fff;
    padding: 2rem 0 5.5rem;
}

.gabby-project-card {
    aspect-ratio: 4 / 3;
    background-color: #c89bc9;
    color: #fff;
    display: block;
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
}

.gabby-project-card__background {
    background-position: center;
    background-size: cover;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.gabby-project-card--cakey {
    background: #f5c96f;
}

.gabby-project-card--babybox {
    background: #e9f3dc;
}

.gabby-project-card--dj {
    background: #18225f;
}

.gabby-project-card__character {
    display: block;
    height: auto;
    left: 50%;
    position: absolute;
    top: 45%;
    transform: translate(-50%, -50%);
    width: 72%;
}

.gabby-project-card--cakey .gabby-project-card__character {
    top: 43%;
    width: 82%;
}

.gabby-project-card--babybox .gabby-project-card__character {
    top: 43%;
    width: 58%;
}

.gabby-project-card--dj .gabby-project-card__character {
    top: 42%;
    transform: translate(-50%, -50%) rotate(18deg);
    width: 86%;
}

.gabby-project-card:hover,
.gabby-project-card:focus,
.gabby-project-card:visited {
    color: #fff;
}

.gabby-project-card,
.gabby-project-card span,
.gabby-project-card strong,
.gabby-project-card:visited span,
.gabby-project-card:visited strong {
    color: #fff;
}

.gabby-project-card__caption {
    background: rgba(139, 67, 151, 0.86);
    bottom: 0;
    display: block;
    font-size: 1.12rem;
    left: 0;
    line-height: 1.35;
    padding: 0.75rem 1rem 0.85rem;
    position: absolute;
    text-align: center;
    width: 100%;
}

.gabby-project-card__caption span,
.gabby-project-card__caption strong {
    display: block;
    font-weight: 400;
}

.hour-of-code-activity-page.gabbys-dollhouse .activity-hero {
    background-color: #dfc0e0;
    height: 29rem;
    min-height: 0;
    overflow: hidden;
    padding-top: 3rem;
    padding-bottom: 0;
    position: relative;
}

.hour-of-code-activity-page.gabbys-dollhouse .activity-hero .title {
    font-size: 3.3rem;
    font-weight: 600 !important;
    line-height: 1.16;
}

.hour-of-code-activity-page.gabbys-dollhouse .activity-hero .subtitle-hero {
    font-size: 1.24rem;
    font-weight: 500;
    line-height: 1.42;
}

.hour-of-code-activity-page.gabbys-dollhouse .activity-icon,
.hour-of-code-activity-page.gabbys-dollhouse .activity-screenshots {
    background-color: #b17fbd;
}

.hour-of-code-activity-page.gabbys-dollhouse .activity-hero-button-container {
    display: inline-block;
    left: 1rem;
    position: absolute;
    top: 0.4rem;
    width: 13rem;
    z-index: 3;
}

.hour-of-code-activity-page.gabbys-dollhouse .gabby-educator-notes-button {
    background: #fff;
    border: 0;
    color: #8b4397;
    font-weight: 700;
    margin: 0;
}

.hour-of-code-activity-page.gabbys-dollhouse .gabby-educator-notes-button:hover,
.hour-of-code-activity-page.gabbys-dollhouse .gabby-educator-notes-button:focus {
    background: #f3e8f5;
    color: #73347f;
}

.hour-of-code-activity-page.gabbys-dollhouse .gabby-project-activity-card {
    margin-bottom: 20px;
}

.hour-of-code-activity-page.gabbys-dollhouse .gabby-project-activity-card .activity-card {
    height: 100%;
}

.hour-of-code-activity-page.gabbys-dollhouse .activity-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hour-of-code-activity-page.gabbys-dollhouse .activity-icon img {
    max-width: 16rem;
    padding: 10px;
}

.hour-of-code-activity-page.gabbys-dollhouse .activity-screenshots .card .card-thumbnail img {
    height: 100%;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

@media print, screen and (min-width: 40em) {
    .hour-of-code-activity-page.gabbys-dollhouse .activity-hero-button-container {
        right: auto;
    }
}

@media print, screen and (min-width: 64em) {
    .hour-of-code-activity-page.gabbys-dollhouse .activity-hero {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 63.9375em) {
    /* Sub-desktop: stop laying art around the text. The hero grows with
       its content and the art becomes a self-contained band that flows
       directly beneath the text (it is the hero's last child in the
       markup), so background art and title text can never overlap. */
    .gabby-hero,
    .hour-of-code-activity-page.gabbys-dollhouse .activity-hero {
        height: auto;
        min-height: 0;
        padding-top: 3rem;
        padding-bottom: 0;
    }

    /* The hero text lives in a medium-7/large-6 grid column; force it to
       full width below desktop so centered text is actually centered
       (otherwise it sits in the left 58% and looks left-shifted). */
    .gabby-hero > .zf-row > .zf-column,
    .hour-of-code-activity-page.gabbys-dollhouse .activity-hero > .zf-row > .zf-column {
        float: none;
        width: 100%;
    }

    .gabby-hero__content,
    .hour-of-code-activity-page.gabbys-dollhouse .activity-hero .zf-row {
        text-align: center;
    }

    .gabby-hero__content {
        max-width: none;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .gabby-landing .gabby-hero h1,
    .gabby-hero h1,
    .hour-of-code-activity-page.gabbys-dollhouse .activity-hero .title {
        font-size: 3rem;
    }

    /* The art container drops out of absolute positioning and becomes an
       in-flow band; its children are positioned relative to this band. */
    /* Aspect-ratio-locked composition: the band is a container query box,
       every element is positioned/sized in % (and text in cqw), so the whole
       arrangement scales as one unit at every width. */
    .gabby-hero__art {
        aspect-ratio: 1.6 / 1;
        container-type: inline-size;
        height: 24rem;
        inset: auto;
        margin: 1.5rem auto 0;
        max-height: calc((100vw - 2rem) * 0.625);
        max-width: 44rem;
        position: relative;
        transform: translateX(-0.75rem);
        width: calc(100% - 2rem);
    }

    /* Branding cluster, top-right. */
    .gabby-hero__series {
        font-size: clamp(0.55rem, 2.5vw, 1rem);
        font-size: clamp(0.55rem, 2.5cqw, 1rem);
        left: 75%;
        right: auto;
        top: 6%;
        transform: translateX(-50%);
        white-space: nowrap;
        width: auto;
    }

    .gabby-hero__art-logo {
        left: 75%;
        right: auto;
        top: 11%;
        transform: translateX(-50%);
        width: 25%;
    }

    .gabby-hero__netflix {
        left: 75%;
        right: auto;
        text-align: center;
        top: 27%;
        transform: translateX(-50%);
        width: 14%;
    }

    /* Characters keep the desktop relationships while the whole group scales. */
    .gabby-hero__art-kitty {
        left: 10%;
        right: auto;
        top: 0.96rem;
        width: 25%;
    }

    .gabby-hero__art-dj {
        left: 31%;
        right: auto;
        top: 7%;
        transform: rotate(30deg);
        width: 35%;
    }

    .gabby-hero__art-cakey {
        bottom: 12%;
        left: 19%;
        right: auto;
        transform: none;
        width: 31%;
    }

    .gabby-hero__art-catrat {
        bottom: 14%;
        left: 46%;
        right: auto;
        transform: rotate(8deg);
        width: 26%;
    }

    .gabby-hero__art-babybox {
        bottom: 12%;
        left: 66%;
        right: auto;
        width: 25%;
    }

    /* Copyright/attribution sits statically under the band. */
    .gabby-hero__copyright,
    .gabby-hero__note {
        bottom: auto;
        left: 1rem;
        right: 1rem;
        margin: 1rem 0 0;
        position: static;
        text-align: center;
        white-space: normal;
    }

    .hour-of-code-activity-page.gabbys-dollhouse .gabby-hero__copyright {
        margin-bottom: 4rem;
    }

    .gabby-overview__copy h2 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 39.9375em) {
    .gabby-hero,
    .hour-of-code-activity-page.gabbys-dollhouse .activity-hero {
        padding-top: 2.5rem;
    }

    .gabby-landing .gabby-hero h1,
    .gabby-hero h1,
    .hour-of-code-activity-page.gabbys-dollhouse .activity-hero .title {
        font-size: clamp(1.85rem, 8vw, 2.35rem);
    }

    .gabby-landing .gabby-hero__intro,
    .gabby-hero__intro,
    .hour-of-code-activity-page.gabbys-dollhouse .activity-hero .subtitle-hero {
        font-size: 1.05rem;
    }

    /* The shared percentage layout above keeps the character arrangement
       consistent on phones; only the surrounding spacing changes here. */
    .gabby-hero__art {
        margin-top: 0.75rem;
        max-height: calc((100vw - 2rem) * 0.54);
    }

    .gabby-hero__art-cakey {
        bottom: 6%;
    }

    .gabby-hero__art-catrat {
        bottom: 8%;
    }

    .gabby-hero__art-babybox {
        bottom: 6%;
    }

    .gabby-overview {
        padding: 3rem 0 2rem;
    }

    .gabby-preview__thumbs {
        gap: 0.35rem;
    }

    .gabby-projects {
        padding-bottom: 3rem;
    }
}