.hero {
    animation: fadeIn 0.5s ease-out;
    font-size: 1.5rem;
    position: relative;
    text-align: center;
    user-select: none;
}

.hero__image {
    display: block;
    left: 50%;
    margin: 0 auto;
    position: absolute;
    transform: translate(20%, -80%);
    top: 0;
}

.hero__logo-text {
    font-family: var(--font-logo);
}

.hero__slogan {
    font-family: var(--font-heading);
    font-variant-ligatures: none;
    margin-top: 1rem;
}

.hero__duration {
    font-weight: 900;
}

/* xs */
@media screen and (min-width: 320px) {
    .hero__image {
        height: 120px;
        transform: translate(33%, -70%);
        width: 120px;
    }

    .hero__slogan {
        font-size: 1.15rem;
    }
}

/* sm */
@media screen and (min-width: 384px) {
    .hero__image {
        height: 160px;
        width: 160px;
        transform: translate(20%, -75%);
    }

    .hero__slogan {
        font-size: 1.25rem;
    }
}

/* md */
@media screen and (min-width: 448px) {
    .hero__image {
        height: 180px;
        width: 180px;
        transform: translate(20%, -75%);
    }

    .hero__logo-text {
        font-size: 2rem;
    }
    
    .hero__slogan {
        font-size: 1.5rem;
    }
}

/* xl */
@media screen and (min-width: 576px) {
    .hero__image {
        transform: translate(30%, -75%);
    }

    .hero__logo-text {
        font-size: 3rem;
    }

    .hero__slogan {
        font-size: 2rem;
    }
}

/* 5xl */
@media screen and (min-width: 1024px) {
    .hero__image {
        height: 200px;
        width: 200px;
        transform: translate(40%, -70%);
    }

    .hero__slogan {
        font-size: 2.5rem;
    }
}