.hero {
    margin-top: var(--nav-height);
    position: relative;
    height: 50vh;
    width: 100%;

    .hero-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-overlay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 75%;
        max-width: 1060px;
        height: 275px;
        position: absolute;
        margin: auto;
        padding: 20px 50px;
        text-align: center;
        background-color: rgba(33, 96, 159, 0.4);
        color: #fff;
        font-size: x-large;

        h1, h2 {
            letter-spacing: 0;
            color: white;
        }

        a {
            position: relative;
            background-color: var(--color-primary);
            text-decoration: none;
            color: white;
            padding: 0 30px;

            span {
                display: block;
            }

            .price {
                line-height: 48px;
                font-weight: bold;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .hero {
        .hero-overlay {
            padding: 20px 0;
            line-height: initial;
            width: 100%;
            height: 100%;
        }
    }
}