.SmallScreenContent {
    display: none;
}

.es-hero-img1 {
    width: 40%;
    height: 40%;
    margin-left: var(--space-xxl);
    margin-top: var(--space-base);
}

.es-hero-img2 {
    width: 35%;
    height: 35%;
    margin-left: var(--space-xxl);
    margin-top: var(--space-base);
}

.es-hero-title1 {
    font-size: 2.5vw;
    line-height: 2.7vw;
    font-weight: 900;
}

.es-hero-title2 {
    font-size: 3.2vw;
    line-height: 3.4vw;
    font-weight: 900;
    font-style: italic;
    color: #EC3585;
}

.es-hero-title3 {
    font-size: 5.2vw;
    line-height: 5.4vw;
    font-weight: 900;
}

.es-hero-title4 {
    font-size: 5.5vw;
    line-height: 5.7vw;
    font-weight: 900;
    font-style: italic;
    color: #EC3585;
}

.es-hero-title5 {
    font-size: 5.2vw;
    line-height: 5.4vw;
    font-weight: 900;
    font-style: italic;
}

.es-hero-body {
    font-size: 1.6vw;
    line-height: 1.8vw;
}

.es-hero-box-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    width: 100%;
    max-width: 42vw;
}

.es-hero-box-wrapper > div {
    width: 49%;
}

.es-hero-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #EC2D85;
    padding: 2vw 1.8vw;
    text-align: center;
}

.es-hero-box.box-left{
    border-radius: 20px 0 0;
}

.es-hero-box.box-right {
    border-radius: 0 0 20px;
}

.es-hero-box-title {
    font-size: 1.6vw;
    line-height: 1.8vw;
    font-weight: 800;
    color: #EC3585;
}

.es-hero-box-body {
    font-size: 1.4vw;
    line-height: 1.6vw;
    font-weight: 600;
}

.Button.es-hero-button {
    height: 30px;
    max-width: 12vw;
    border-radius: 8px;
    padding: 2px;
    font-size: 1.2vw;
    margin-top: var(--space-l);
}

.es-showmehow-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 12vw;
    max-width: 12vw;
    border-radius: 8px;
    box-shadow: 0 5px 10px 0 rgba(204, 204, 204, 0.3);
    background-color: #ec438f;
    color: white;
    font-size: 1.2vw;
    font-weight: var(--font-semi-bold);
    padding: 2px;
    margin-top: var(--space-l);
}

.es-hero-img-mob {
    width: 80%;
}

.es-hero-title1-mob {
    font-size: 28px;
    line-height: 30px;
    font-weight: 900;
}

.es-hero-title2-mob {
    font-size: 36px;
    line-height: 38px;
    font-weight: 900;
    font-style: italic;
    color: #EC3585;
}

.es-hero-title3-mob {
    font-size: 56px;
    line-height: 58px;
    font-weight: 900;
}

.es-hero-title4-mob {
    font-size: 58px;
    line-height: 60px;
    font-weight: 900;
    font-style: italic;
    color: #EC3585;
}

.es-hero-title5-mob {
    font-size: 56px;
    line-height: 58px;
    font-weight: 900;
    font-style: italic;
}

.es-hero-body-mob {
    font-size: 14px;
    line-height: 16px;
}

.es-hero-box-wrapper-mob {
    display: flex;
    flex-direction: column;
}

.es-hero-box-mob {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #EC2D85;
    padding: 20px;
    text-align: center;
    width: 275px;
}

.es-hero-box-mob.box-left{
    border-radius: 20px 0 0;
}

.es-hero-box-mob.box-right {
    border-radius: 0 0 20px;
}

.es-hero-box-title-mob {
    font-size: 15px;
    line-height: 17px;
    font-weight: 800;
    color: #EC3585;
}

.es-hero-box-body-mob {
    font-size: 13px;
    line-height: 15px;
    font-weight: 600;
}

.Button.es-hero-button-mob {
    height: 24px;
    max-width: 112px;
    border-radius: 6px;
    padding: 2px;
    font-size: 12px;
    margin-top: var(--space-base);
}

.es-showmehow-button-mob {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    width: 112px;
    max-width: 112px;
    border-radius: 6px;
    box-shadow: 0 5px 10px 0 rgba(204, 204, 204, 0.3);
    background-color: #ec438f;
    color: white;
    font-size: 12px;
    font-weight: var(--font-semi-bold);
    padding: 2px;
    margin-top: var(--space-base);
}

@media only screen and (max-width: 800px) {
    .LargeScreenContent {
        display: none;
    }
    
    .SmallScreenContent {
        display: block;
    }
}

@media only screen and (min-width: 1280px) {
    .es-hero-title1 {
        font-size: 34px;
        line-height: 36px;
    }

    .es-hero-title2 {
        font-size: 43px;
        line-height: 45px;
    }

    .es-hero-title3 {
        font-size: 68px;
        line-height: 70px;
    }

    .es-hero-title4 {
        font-size: 70px;
        line-height: 72px;
    }

    .es-hero-title5 {
        font-size: 68px;
        line-height: 70px;
    }

    .es-hero-body {
        font-size: 20px;
        line-height: 22px;
    }

    .es-hero-box-wrapper {
        width: 90%;
        max-width: 520px;
    }

    .es-hero-box {
        padding: 25px 20px;
    }

    .es-hero-box-title {
        font-size: 20px;
        line-height: 22px;
    }

    .es-hero-box-body {
        font-size: 18px;
        line-height: 20px;
    }

    .Button.es-hero-button {
        height: 32px;
        max-width: 150px;
        font-size: 16px;
        margin-top: var(--space-xl);
    }

    .es-showmehow-button {
        height: 32px;
        width: 150px;
        max-width: 150px;
        font-size: 16px;
        margin-top: var(--space-xl);
    }
}