.hero {
    background-color: #ffeef5;
    margin: 60px 0 0 0;
    padding: 68px 12px;
    text-align: center;
    width: 100%;
}
.hero h1 {
    color: var(--black);
    font-size: clamp(50px, 9vw, 8rem);
    max-width: 10em;
    margin: 0 auto 32px;
}
.hero h2 {
    color: var(--black);
    margin: 0 auto 32px;
    max-width: 21em;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 400;
    line-height: normal;
}
.hero .btn {
    background: #e5477c;
    color: var(--white);
    margin: 0;
    font-size: 22px;
    padding: 12px 24px;
    font-weight: 600;
}
.hero .btn:hover,
.hero .btn:focus,
.hero .btn:active {
    background-color: #c62f61;
    color: var(--white);
}
.hero .hero-logo {
    margin: 0 0 32px;
    max-width: 42em;
    width: 100%;
}