/* Page-specific overrides */

.inner-hero:before {
    background-image: url("../img/tarot5d-banner.webp");
    background-size: 100% auto;
}

#tarot5d-cards {
    padding-top: 46px;
}

#tarot5d-cards .section-title {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .inner-hero:before {
        background-size: auto 100%;
    }
}

@media (max-width: 620px) {
    .inner-hero {
        min-height: 98svh;
        padding-bottom: 0;
        background: #17130f;
    }

    .inner-hero::before {
        background-image: url("../img/tarot5d5-banner.webp");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;

        filter:
            saturate(.96) contrast(.96) brightness(.98);
    }

    /*
     * Move the viewport farther towards the right side of the
     * original image, preserving the traveller and revealing
     * more of the ordinary room/bed area.
     */
    /* .inner-hero:before {
        background-size: auto 100%;
        background-position: 76% top;
        background-repeat: no-repeat;
        filter: saturate(1) contrast(.98) brightness(1.05);
    } */

    .inner-hero:after {
        background:
            linear-gradient(90deg,
                rgba(20, 16, 12, .30) 0%,
                rgba(20, 16, 12, .14) 48%,
                rgba(20, 16, 12, .08) 100%),
            linear-gradient(180deg,
                rgba(0, 0, 0, .02) 0%,
                rgba(0, 0, 0, 0) 54%,
                rgba(0, 0, 0, .22) 100%);
    }

    .inner-hero-content {
        min-height: calc(98svh - 96px);
        padding: 92px 0 18px;
    }

    /*
     * Explicitly control the relationship between title and subtitle.
     */
    .inner-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .inner-title {
        margin: 0;
    }

    .inner-intro {
        max-width: 320px;
        margin: 0;
        font-size: 14px;
        line-height: 1.62;
    }

    /*
     * Ignore manually inserted line breaks and allow the browser
     * to wrap the sentence naturally on mobile.
     */
    .inner-intro br {
        display: none;
    }
}