/* ==========================================================================
   7 Day Travel Package Stylesheet (travelPackage.css)
   Formatted to match the aesthetic & layout system of index.html
   ========================================================================== */

/* ---- hero header bar thing ---- */

.heading-hero {
    /* background-image: linear-gradient(rgba(27, 59, 43, 0.45), rgba(27, 59, 43, 0.25)), url(../images/seven-day/horse-drawn-covered-wagons-forest-trail.webp); */
    background-image: linear-gradient(rgba(27, 59, 43, 0.70), rgba(27, 59, 43, 0.76)), url(../images/seven-day/galleryBackground/IMG_0887-cropped.webp);
}

.heading-hero p {
    color: var(--accent-gold-light) !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5)
}

#bottom {
    margin-top: var(--spacing-lg);
}

#tp-options h3 {
    margin-bottom: var(--spacing-lg);
}

#TheAdvenIncluImg {
    aspect-ratio: 1/1;
}

@media (max-width:970px) {
    #TheAdvenIncluImg {
        aspect-ratio: 3/4;
    }
}


    /* ---- Dates Card Image: Match 2-Column Height & Crop Without Stretching ---- */
    .dates-crop-img {
        flex: 1 1 0px;
        height: 0;
        min-height: 0;
        width: 100%;
        object-fit: cover;
        object-position: 70% 8%;
        margin-top: var(--spacing-sm);
    }

    @media (max-width: 768px) {

            .dates-crop-img {
                flex: none;
                height: clamp(320px, calc(520px - 25vw), 450px);
            }
        }