@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

.lo-babySteps {
    width: min(1520px, 100%);
    margin: 15px auto 0;
    color: #3B444D;
    font: 400 16px/1 "Plus Jakarta Sans", serif;
    position: relative;
    background: #F7F4F1;
}

.lo-babySteps p {
    margin: 0;
}

.lo-babySteps-header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.lo-babySteps-header__picture {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 1;
}

.lo-babySteps-header__headerImg {
    width: 100%;
}

.lo-babySteps-header__body {
    grid-column: 2 / -1;
    grid-row: 1 / -1;
    z-index: 2;
    justify-self: center;
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;

    @media screen and (max-width: 928px) {
        justify-self: left;
    }

    @media screen and (max-width: 598px) {
        grid-column: 1 / -1;
        justify-content: center;
        width: 100%;
        justify-self: center;
    }
}

.lo-babySteps-header__bodyWrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 25px;
    width: min(478px, 100%);
    margin-inline-start: 55px;

    @media screen and (max-width: 1259px) {
        gap: clamp(1.125rem, -0.1066rem + 2.1212vw, 1.5625rem);
    }

    @media screen and (max-width: 928px) {
        margin-inline-start: 0;
        margin-inline-end: 8px;
    }

    @media screen and (max-width: 598px) {
        width: 100%;
        align-items: flex-end;
        justify-content: flex-start;
        margin-inline: 8px;
        padding-block-start: clamp(2.5rem, -3.6151rem + 30.5755vw, 7.8125rem);
        gap: clamp(0.625rem, 0.2653rem + 1.7986vw, 0.9375rem);
    }
}

.lo-babySteps-header__logoImg {
    width: 100%;

    @media screen and (max-width: 1259px) {
        max-width: clamp(17.4375rem, -12.2975rem + 51.2121vw, 28rem);
    }

    @media screen and (max-width: 928px) {
        max-width: clamp(14.25rem, -0.6567rem + 39.8176vw, 22.4375rem);
    }

    @media screen and (max-width: 598px) {
        max-width: clamp(12.5rem, -0.8094rem + 66.5468vw, 24.0625rem);
    }
}

.lo-babySteps-header__title,
.lo-babySteps-header__subTitle {
    margin: 0;
}

.lo-babySteps-header__title {
    font-size: 40px;
    line-height: 1;
    font-weight: 500;

    @media screen and (max-width: 1259px) {
        font-size: clamp(2rem, 0.5924rem + 2.4242vw, 2.5rem);
    }

    @media screen and (max-width: 928px) {
        font-size: clamp(1.75rem, 1.2948rem + 1.2158vw, 2rem);
    }

    @media screen and (max-width: 598px) {
        text-align: right;
        font-size: clamp(1rem, -0.1511rem + 5.7554vw, 2rem);
    }
}

.lo-babySteps-header__subTitle {
    font-size: 22px;
    line-height: 1.5;
    font-weight: 300;
    width: 28ch;

    @media screen and (max-width: 1259px) {
        font-size: clamp(1.0625rem, 0.1828rem + 1.5152vw, 1.375rem);
    }

    @media screen and (max-width: 928px) {
        font-size: clamp(1rem, 0.5448rem + 1.2158vw, 1.25rem);
        width: unset;
    }

    @media screen and (max-width: 598px) {
        text-align: right;
        font-size: clamp(0.875rem, 0.2995rem + 2.8777vw, 1.375rem);
    }
}

.lo-babySteps-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 35px;
    width: min(872px, 100%);
    margin-inline: auto;
    margin-block-end: 35px;
    padding: 25px 10px;
}

.lo-babySteps-intro__specWrapper {
    width: min(700px, 100%);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 20px;
    grid-template-areas:
        "ph nm"
        "ph sd"
        "ph bd";

    @media screen and (max-width: 598px) {
        grid-template-rows: auto;
        row-gap: 15px;
        grid-template-areas:
            "nm nm"
            "sd sd"
            "ph bd"
        ;
    }
}

.lo-babySteps-intro__imgWrapper {
    grid-area: ph;
    justify-self: center;
    align-content: center;
}

.lo-babySteps-intro__img {
    width: min(224px, 100%);
}

.lo-babySteps-intro__nameWrapper {
    grid-area: nm;
    align-self: self-end;
}

.lo-babySteps-intro__name {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
}

.lo-babySteps-intro__name--nick {
    font-weight: 300;
    font-style: italic;
}

.lo-babySteps-intro__shortWrapper {
    grid-area: sd;
    align-self: center
}

.lo-babySteps-intro__short {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}

.lo-babySteps-intro__descWrapper {
    grid-area: bd;

    @media screen and (max-width: 598px) {
        align-self: center;
    }
}

.lo-babySteps-intro__desc {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    text-wrap: balance;
}

.lo-babySteps-intro__bodyTxt {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    text-align: center;
    text-wrap: pretty;
}

.lo-babySteps-intro__bodyTxt--highlighted {
    color: #007574;
    display: block;
}

.lo-babySteps-body {
    background: #FFFFFF;
    padding: 25px 35px;

    @media screen and (max-width: 768px) {
        padding-inline: clamp(0.75rem, -0.2768rem + 5.1339vw, 2.1875rem);
    }
}

.lo-babySteps-videoSection {
    border: none;
    border-radius: 24px;
    width: calc(100% - 45px);
    margin-inline: auto;
    margin-block-end: 35px;
    background: #D1C6BA;
    transition: background 450ms linear;
    padding: 10px;

    @media screen and (max-width: 768px) {
        width: 100%;
        margin-block-end: 25px;
    }
}

.lo-babySteps-videoSection[active] {
    background: #EFEAE3;
}

.lo-babySteps-videoSection--prod {
    background: #5BA6A6;
    transition: background 450ms linear;
}

.lo-babySteps-videoSection--prod[active] {
    background: #E1FCFC;
}

.lo-babySteps-videoSection:not(:has(.lo-babySteps-videoSection__subTitle)) {
    padding-block: 20px;
}

.lo-babySteps-videoSection__header {
    width: 85%;
    margin-inline: auto;
    position: relative;

    @media (width <=768px) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5px;
        width: 95%;
    }
}

.lo-babySteps-videoSection__header--prod {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 11px;
}

.lo-babySteps-videoSection__headerContent {
    text-align: center;

    @media (768px < width) {
        max-width: calc(100% - 90px);
        margin-inline: auto;
    }

    @media (width <=768px) {
        max-width: unset;
        flex-grow: 1;
    }
}

.lo-babySteps-videoSection__headerContent--prod {
    text-align: left;
    max-width: unset;
    margin-inline: unset;
}

.lo-babySteps-videoSection__title {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    transition: color 450ms linear;

    @media (width <=1240px) {
        font-size: clamp(1.3125rem, 0.19rem + 2.3355vw, 2rem);
    }

    @media (width <=768px) {
        font-size: clamp(1.25rem, 0.8482rem + 2.0089vw, 1.8125rem);
    }
}

.lo-babySteps-videoSection[active] .lo-babySteps-videoSection__title {
    color: #A9947D;
}

.lo-babySteps-videoSection--prod[active] .lo-babySteps-videoSection__title--prod {
    color: #5BA6A6;
}

.lo-babySteps-videoSection__subTitle {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.3;
    color: #fff;
    transition: color 450ms linear;

    @media (width <=1240px) {
        font-size: clamp(1.1875rem, 0.6773rem + 1.0616vw, 1.5rem);
    }

    @media (width <=768px) {
        font-size: clamp(1rem, 0.7768rem + 1.1161vw, 1.3125rem);
    }
}

.lo-babySteps-videoSection[active] .lo-babySteps-videoSection__subTitle {
    color: #A9947D;
}

.lo-babySteps-videoSection--prod[active] .lo-babySteps-videoSection__subTitle--prod {
    color: #5BA6A6;
}

.lo-babySteps-videoSection__moreBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    appearance: none;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;

    @media (width <=768px) {
        position: relative;
        transform: none;
        max-width: 45px;
    }
}

#lo_babySteps .lo-babySteps-videoSection__moreBtn:focus {
    outline: none;
}

.lo-babySteps-videoSection__moreBtn--prod {
    position: relative;
    margin-inline-start: auto;
    transform: none;
}

.lo-babySteps-videoSection__arrow {
    max-width: 45px;
    transition: all 450ms linear;
}

.lo-babySteps-videoSection[active] .lo-babySteps-videoSection__arrow {
    transform: rotate(180deg);
}

.lo-babySteps-videoSection__moreContent {
    overflow: hidden;
    text-align: center;
    max-height: 0;
    transition: all 450ms linear;
}

.lo-babySteps-videoSection[active] .lo-babySteps-videoSection__moreContent {
    padding-block: 25px;
    max-height: 1500px;
}

.lo-babySteps-videoSection__placeholder:has(+ .lo-babySteps-videoSection__placeholder) {
    margin-block-end: 20px;
}

.lo-babySteps-videoSection__moreContent iframe {
    width: 80%;
    height: auto;
    aspect-ratio: 16/9;

    @media (width <=768px) {
        width: 95%;
    }
}

.lo-babySteps-care {
    width: calc(100% - 45px);
    margin-inline: auto;
    position: relative;
    display: grid;

    @media screen and (max-width: 768px) {
        width: 100%;
    }
}

.lo-babySteps-care__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.lo-babySteps-care__picture {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 1;
}

.lo-babySteps-care__img {
    width: 100%;
}

.lo-babySteps-care__body {
    justify-self: end;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 2;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 25px;
    margin-inline-end: 35px;

    @media (width < 599px) {
        width: 100%;
        justify-self: center;
        align-items: center;
        justify-content: flex-start;
        margin-inline-end: 0px;
        margin-block-start: clamp(1.5625rem, -0.9555rem + 12.5899vw, 3.75rem);
        padding-inline: 8px;
    }
}

.lo-babySteps-care__bodyTxt {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-align: center;

    @media (width <=1440px) {
        font-size: clamp(1.375rem, 0.2387rem + 1.9569vw, 2rem);
    }

    @media (width <=928px) {
        font-size: clamp(1.125rem, 0.3285rem + 2.1277vw, 1.5625rem);
    }

    @media (width <=599px) {
        font-size: clamp(1.1875rem, 0.4681rem + 3.5971vw, 1.8125rem);
    }
}

.lo-babySteps-care__button {
    appearance: none;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 34px;
    padding: 15px 35px;
    font-family: "Plus Jakarta Sans", serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    color: #A9947D;
    text-transform: uppercase;
    margin-inline: auto;
    transition: all 450ms ease-in;

    @media (width <=1440px) {
        font-size: clamp(1rem, 0.091rem + 1.5656vw, 1.5rem);
    }

    @media (width <=928px) {
        font-size: clamp(0.6875rem, 0.1185rem + 1.5198vw, 1rem);
    }

    @media (width <=599px) {
        font-size: clamp(0.8125rem, 0.165rem + 3.2374vw, 1.375rem);
    }
}

.lo-babySteps-care__link:hover~.lo-babySteps-care__body .lo-babySteps-care__button {
    background: #A9947D;
    color: #fff;
}

/* Mini LP */
.lo-babySteps-header__bodyWrapper--introPage {
    align-items: flex-end;
}

.lo-babySteps-header__title--introPage {
    line-height: 1.2;
}

.lo-babySteps-header__title--introPage,
.lo-babySteps-header__subTitle--introPage {
    text-align: right;
}

.lo-babysteps-intro__main {
    padding-inline: 15px;
    padding-block-end: 25px;
}

.lo-babysteps-introHeader {
    width: min(1000px, 100%);
    margin-inline: auto;
    margin-block-end: 65px;
    padding-block-start: 45px;
}

.lo-babysteps-introHeader__title {
    display: block;
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    width: min(37ch, 100%);
    margin-inline: auto;
    margin-block-end: 30px;
    text-wrap: pretty;

    @media (width <=768px) {
        font-size: clamp(1.5rem, 1.1429rem + 1.7857vw, 2rem);
    }
}

.lo-babysteps-introTopicList {
    width: min(647px, 100%);
    margin-inline: auto;
    border-radius: 24px;
    background: #EFEAE3;
    padding: 30px 10px;
    margin-block-end: 65px;
}

.lo-babysteps-introListWrapper {
    width: min(410px, 100%);
    margin-inline: auto;
}

.lo-babysteps-introTitle {
    font-size: 24px;
    font-weight: 600px;
    margin: 0;
}

.lo-babysteps-introList {
    margin-block: 25px;
    padding-inline-start: 20px;
}

.lo-babysteps-introList__item {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    line-height: 1.3;
    margin-block-end: 10px;
}

.lo-babysteps-introListWrapper .lo-babySteps-intro__bodyTxt {
    text-align: left;
}

.lo-babysteps-introInfo {
    width: min(1174px, 100%);
    margin-inline: auto;
    margin-block-end: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 35px;

    @media (width <=768px) {
        flex-wrap: wrap;
    }
}

.lo-babysteps-introInfo__picture {
    flex-basis: 481px;
    flex-shrink: 2;

    @media (width <=768px) {
        flex-basis: 80%;
        flex-grow: 1;
    }
}

.lo-babysteps-introInfo__img {
    width: 100%;
    height: auto;
}

.lo-babysteps-introInfo__body {
    flex-basis: 500px;
    flex-grow: 1;
    flex-shrink: 3;
}

.lo-babysteps-introInfo .lo-babysteps-introTitle {
    margin-block-end: 25px;
}

.lo-babysteps-introInfo .lo-babySteps-intro__bodyTxt {
    text-align: left;
}

.lo-babysteps-introInfo .lo-babySteps-intro__bodyTxt {
    margin-block-end: 12px;
}

.lo-babysteps-introInfo .lo-babySteps-intro__bodyTxt:last-of-type {
    margin-block-end: 22px;
}

.lo-babysteps-intro-divider {
    width: 80%;
    margin-inline: auto;
}

.lo-babysteps-intro-link {
    @media (width <=768px) {
        margin-inline: auto;
        display: block;
        width: fit-content;
    }
}

.lo-babysteps-intro-button {
    appearance: none;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    color: #fff;
    border: 1px solid #3B444D;
    border-radius: 10px;
    background: #F1952A;
    padding: 12px 35px;
    line-height: 1;
    cursor: pointer;
    transition: color 450ms ease-in, background 450ms ease-in;
}

.lo-babysteps-intro-button:hover {
    color: #F1952A;
    background: #fff;
}