.hero .hero-floating-image {
    position: absolute;
    right: 0;
    bottom: -75%;
    z-index: 2;
}

.hero .hero-floating-image{
	max-width: 400px;
}

.hero.floating-image-left .hero-floating-image{
    left: 0;
    right: unset;
}

.hero.background-babyblue .cakeable-button{
    background: var(--color-teal)
}

.hero.background-babyblue .cakeable-button:hover{
    background: var(--color-navy)
}

.hero.background-navy .cakeable-button.navy{
	    background: var(--color-teal)
}

.hero.background-navy .cakeable-button.navy:hover{
	background: var(--color-pink);
}

@media only screen and (min-width: 64em) {
    .hero {
        min-height: 470px;
    }
}