.trip-campground-card {
    padding: 0.6rem;
    gap: 0.75rem;
}

.trip-card-image {
    flex: 0 0 110px;
}

    .trip-card-image img {
        width: 110px;
        height: 110px;
    }

.trip-card-btn {
    width: 28px;
    height: 28px;
}

.trip-card-wrapper .visited-btn.trip-card-btn {
    top: 30px;
    right: 40px;
}

.trip-card-wrapper .favorite-btn.trip-card-btn {
    top: 30px;
    right: 6px;
}

.trip-campground-card .campground-name {
    font-size: 1rem;
}

.trip-campground-card .campground-location,
.trip-campground-card .campground-meta {
    font-size: 0.85rem;
    margin: 0.1rem 0;
}

.trip-campground-card .rate-block {
    padding: 0.25rem 0.5rem;
}

.trip-campground-card .rate-label {
    font-size: 0.8rem;
}

.trip-campground-card .rate-amount {
    font-size: 1rem;
}

@media (max-width: 576px) {
    /* compound selectors (two classes) guarantee these win over the base
       card's own 576px rules regardless of stylesheet load order, since a
       single-class selector tie would otherwise depend on file order */

    .campground-card.trip-campground-card {
        flex-direction: row; /* stay horizontal/compact -- the base card's mobile
                                 stacking would defeat the point of this card */
        gap: 0.6rem;
        padding: 0.5rem;
    }

    .campground-card-image.trip-card-image {
        flex: 0 0 84px;
        width: 84px;
    }

        .campground-card-image.trip-card-image img {
            width: 84px;
            height: 84px;
        }

    .trip-card-wrapper .visited-btn.trip-card-btn {
        top: 26px;
        right: 36px;
        bottom: auto;
    }

    .trip-card-wrapper .favorite-btn.trip-card-btn {
        top: 26px;
        right: 4px;
        bottom: auto;
    }

    .trip-campground-card .campground-name {
        font-size: 0.9rem;
        white-space: normal;
    }

    .trip-campground-card .campground-location,
    .trip-campground-card .campground-meta {
        font-size: 0.78rem;
    }

    .trip-campground-card .campground-rates {
        gap: 0.35rem;
    }

    .trip-campground-card .rate-block {
        padding: 0.2rem 0.4rem;
    }

    .trip-campground-card .rate-label {
        font-size: 0.7rem;
    }

    .trip-campground-card .rate-amount {
        font-size: 0.85rem;
    }
}