.paragraph--type--hero{
    padding-top: 2rem;
    background-size: cover;
    background-position: bottom;
}
@media(min-width: 48rem){
    .paragraph--type--hero{
        padding-top: 4.5rem;
    }
}

.paragraph--type--hero .content{
    display: flex;
    gap: 2rem;
    max-width: 61.25rem;
    padding-inline: 1.5rem;
    margin: 0 auto;
    align-items: center;
    flex-direction: column-reverse;
}
@media(min-width: 48rem){
    .paragraph--type--hero .content{
        flex-direction: row;
        gap: 3rem;
        align-items: flex-end;
    }
}
@media(min-width: 64rem){
    .paragraph--type--hero .content{
        gap: 5.75rem;
    }
}

@media(min-width: 48rem){
    .paragraph--type--hero .content .content-image{
        flex-shrink: 0;
    }
}

.paragraph--type--hero .content .content-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}
@media(min-width: 48rem){
    .paragraph--type--hero .content .content-text{
        display: block;
        text-align: left;
    }
}

.paragraph--type--hero .content .content-text .title{
    font-size: 1.6rem;
    line-height: 1.15;
    max-width: 100%;
}
@media(min-width: 48rem){
    .paragraph--type--hero .content .content-text .title{
        font-size: 2.625rem;
        max-width: 100%;
    }
}

.paragraph--type--hero .content .content-text .title.white{
    color: var(--c-white);
    text-shadow: 0 0 5px var(--c-black);
}

.paragraph--type--hero .content .content-text .title h1{
    font-weight: var(--f-strong);
    font-size: 1.6rem;
    margin-bottom: 0;
}
@media(min-width: 48rem){
    .paragraph--type--hero .content .content-text .title h1{
        font-size: 2.625rem;
    }
}

.paragraph--type--hero .content .content-text .content-links{
    margin-top: 1.25rem;
    margin-bottom: 0;
}
@media(min-width: 48rem){
    .paragraph--type--hero .content .content-text .content-links{
        margin-bottom: 6rem;
        margin-top: 2rem;
    }
}

.paragraph--type--hero .content .content-text .links{
    display: flex;
    gap: 0.35rem;
    margin-top: 1rem;
}
@media(min-width: 48rem){
    .paragraph--type--hero .content .content-text .links{
        gap: 1rem;
    }
}

body .region-content .paragraph--type--hero a.button-cta:hover{
    text-decoration: none;
    color: var(--c-white);
    background-color: var(--c-primary-700);
}