.hero {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.hero .display {
    font-family: var(--font-heading);
    font-weight: var(--display-weight);
    font-size: var(--display-size);
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
    text-align: center;
}

.hero .wrapper {
    overflow-y: hidden;
    width: 100%;
}

.hero .inner {
    display: flex;
    position: relative;
    justify-content: center;
    background-color: var(--accent3);
    margin-top: 6.25rem;
    height: 362px;
    border-radius: 1.87rem;
}

.hero .hero-image {
    position: absolute;
    top: -50px;
    width: 259px;
    height: 540px;
    border: solid 11px black;
    border-radius: 33px;
    background-image: url('../assets/images/mobile-screen.png');
    background-size: cover;  
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 768px) {
    .hero .display {
        font-size: 7rem;
    }

    .hero .hero-image {
        width: 648px;
        border-width: 12px;
        border-radius: 20px;
        background-image: url('../assets/images/tablet-screen.png');
        background-size: contain;  
        background-position: top;
        
    }

    .hero .inner {
        height: 350px;
    } 
}

@media (min-width: 1200px) {
    .hero .hero-image {
        position: relative;
        top: -120px;
        background-image: url('../assets/images/desktop-screen.png');
        background-size: cover;
        width: 869px;
        border-width: 14px;
    }

    .hero .inner {
        margin-top: 12rem;
    }

    .hero .display {
        font-size: 8rem;
    }
}