section.hero > .text-content {
    position: absolute;
    background-color: rgba(var(--primary-hero-bg-color),.5);
    color: rgba(var(--primary-hero-color), 1.0);
    backdrop-filter: blur(20px);
    padding: 40px 30px;
    bottom: var(--margin-x-mobile);
    left: var(--margin-x-mobile);
    right: var(--margin-x-mobile);
    z-index: 10;
    animation: slideFromBottom 1.6s ease-out 0.2s, fadeIn 1.8s;
}

/*section.hero.secondary > .text-content {
    color: rgba(var(--secondary-hero-color), 1.0);
    background-color: rgba(var(--secondary-hero-bg-color), 0.5);
}

section.hero.tertiary > .text-content {
    color: rgba(var(--tertiary-hero-color), 1.0);
    background-color: rgba(var(--tertiary-hero-bg-color), 0.5);
}
*/
section.hero > img {
    height: 80vh;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    object-fit: cover;
}

section.hero > .text-content > .button {
    margin-top: 40px;
}

@media screen and (min-width: 700px) {
    section.hero > .text-content {
        width: 40%;
        left: var(--margin-x-desktop);
        bottom: var(--margin-x-desktop);
        padding: 50px;
    }
}