Hotel Accommodation Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f9fafb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Hotel Card Styles === */
.hotel-card {
    --hotel-radius: 12px;
    --hotel-shadow: 0 4px 10px rgba(0,0,0,0.06);

background-color: #ffffff;
    border-radius: var(--hotel-radius);
    box-shadow: var(--hotel-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.hotel-card:hover .hotel-card-image {
    transform: scale(1.05);
}

.hotel-card-image-container {
    position: relative;
    overflow: hidden;
}
.hotel-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
/* Wishlist heart button */
.hotel-wishlist-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #374151;
}
.hotel-wishlist-btn:hover { color: #ef4444; }
.hotel-wishlist-btn svg { width: 20px; height: 20px; }

.hotel-card-content {
    padding: 1rem 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
/* Top line: stars and location */
.hotel-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.hotel-rating { display: flex; gap: 0.125rem; color: #f59e0b; }
.hotel-rating svg { width: 16px; height: 16px; }

.hotel-location { font-size: 0.875rem; color: #6b7280; }

.hotel-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}
.hotel-card-title-link {
    text-decoration: none;
    color: inherit;
}
.hotel-card-title-link:hover { text-decoration: underline; }

/* Amenities list */
.hotel-amenities {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: #4b5563;
    flex-wrap: wrap;
    margin: 0;
}
.hotel-amenities span { display: flex; align-items: center; gap: 0.35rem; }
.hotel-amenities svg { width: 16px; height: 16px; }

/* Footer with price and CTA */
.hotel-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Pushes footer down */
    padding-top: 1rem;
}
.hotel-price .price-amount {
    font-size: 1.375rem;
    font-weight: 700;
}
.hotel-price .price-period {
    font-size: 0.875rem;
    color: #6b7280;
}

.hotel-cta {
    background-color: #1f2937;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.hotel-cta:hover { background-color: #374151; }

</style>

<div class="cards-grid-container">

<article class="hotel-card">
        <div class="hotel-card-image-container">
            
            <img class="hotel-card-image" src="https://placehold.co/600x440/a78bfa/ffffff/png?text=Hotel+A" alt="Lobby of the Serenity Grand Hotel.">
            <button class="hotel-wishlist-btn" aria-label="Add to wishlist">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M1.24264 8.24264L8 15L14.7574 8.24264C15.553 7.44699 16 6.36786 16 5.24264V5.05234C16 2.8143 14.1857 1 11.9477 1C10.7166 1 9.55233 1.55959 8.78331 2.52086L8 3.5L7.21669 2.52086C6.44767 1.55959 5.28338 1 4.05234 1C1.8143 1 0 2.8143 0 5.05234V5.24264C0 6.36786 0.44699 7.44699 1.24264 8.24264Z"></path></svg>                 
            </button>
        </div>
        <div class="hotel-card-content">
            <header class="hotel-card-header">
                <div class="hotel-rating" title="4 out of 5 stars">
                     <span class="visually-hidden">Rating: 4 out of 5 stars</span>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1.75a.75.75 0 01.692.462l1.41 3.393 3.663.416a.75.75 0 01.43 1.298l-2.72 2.457 1.056 3.734a.75.75 0 01-1.14.828L8 12.193l-3.192 1.954a.75.75 0 01-1.14-.828l1.056-3.734-2.72-2.457a.75.75 0 01.43-1.298l3.663-.416L7.308 2.212A.75.75 0 018 1.75z" clip-rule="evenodd"/></svg>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1.75a.75.75 0 01.692.462l1.41 3.393 3.663.416a.75.75 0 01.43 1.298l-2.72 2.457 1.056 3.734a.75.75 0 01-1.14.828L8 12.193l-3.192 1.954a.75.75 0 01-1.14-.828l1.056-3.734-2.72-2.457a.75.75 0 01.43-1.298l3.663-.416L7.308 2.212A.75.75 0 018 1.75z" clip-rule="evenodd"/></svg>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1.75a.75.75 0 01.692.462l1.41 3.393 3.663.416a.75.75 0 01.43 1.298l-2.72 2.457 1.056 3.734a.75.75 0 01-1.14.828L8 12.193l-3.192 1.954a.75.75 0 01-1.14-.828l1.056-3.734-2.72-2.457a.75.75 0 01.43-1.298l3.663-.416L7.308 2.212A.75.75 0 018 1.75z" clip-rule="evenodd"/></svg>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M8 1.75a.75.75 0 01.692.462l1.41 3.393 3.663.416a.75.75 0 01.43 1.298l-2.72 2.457 1.056 3.734a.75.75 0 01-1.14.828L8 12.193l-3.192 1.954a.75.75 0 01-1.14-.828l1.056-3.734-2.72-2.457a.75.75 0 01.43-1.298l3.663-.416L7.308 2.212A.75.75 0 018 1.75z" clip-rule="evenodd"/></svg>
                </div>
                <div class="hotel-location">Kyoto, Japan</div>
            </header>
            <a href="#" class="hotel-card-title-link">
                <h3 class="hotel-card-title">Serenity Grand Hotel</h3>
            </a>
            <div class="hotel-amenities">
                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M30.9,24.7c-0.2-0.5-0.7-0.8-1.3-0.6l-2.6,0.9c-2.7,0.9-5.7,0.6-8.2-0.6l0.2-0.2c1.7-1.7,1.7-4.5,0-6.2c0,0,0,0,0,0 l-7.5-7.5C10.2,9,7.8,9,6.4,10.4L2,14.8c-0.3,0.3-0.5,0.7-0.5,1.2s0.2,0.9,0.5,1.2c0.6,0.6,1.5,0.7,2.1,0.2L9,14.2l2.8,2.8 l-2.6,2.6c-1.6-0.1-3.3,0.1-4.9,0.6l-2.6,0.9c-0.5,0.2-0.8,0.7-0.6,1.3c0.2,0.5,0.7,0.8,1.3,0.6l2.6-0.9c3.6-1.2,7.6-0.4,10.4,2.2 c2.3,2.1,5.3,3.2,8.4,3.2c1.3,0,2.7-0.2,4-0.6l2.6-0.9C30.8,25.8,31.1,25.2,30.9,24.7z"></path> <path d="M23,17c2.8,0,5-2.2,5-5s-2.2-5-5-5s-5,2.2-5,5S20.2,17,23,17z"></path></svg>Pool</span>
                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" fill="currentColor"><path d="M568.25 192c-29.04.13-135.01 6.16-213.84 83-33.12 29.63-53.36 63.3-66.41 94.86-13.05-31.56-33.29-65.23-66.41-94.86-78.83-76.84-184.8-82.87-213.84-83-4.41-.02-7.79 3.4-7.75 7.82.23 27.92 7.14 126.14 88.77 199.3C172.79 480.94 256 480 288 480s115.19.95 199.23-80.88c81.64-73.17 88.54-171.38 88.77-199.3.04-4.42-3.34-7.84-7.75-7.82zM287.98 302.6c12.82-18.85 27.6-35.78 44.09-50.52 19.09-18.61 39.58-33.3 60.26-45.18-16.44-70.5-51.72-133.05-96.73-172.22-4.11-3.58-11.02-3.58-15.14 0-44.99 39.14-80.27 101.63-96.74 172.07 20.37 11.7 40.5 26.14 59.22 44.39a282.768 282.768 0 0 1 45.04 51.46z"></path></svg>Spa</span>
                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M24,13.5V10c0-4.4-3.6-8-8-8s-8,3.6-8,8v3.5c-1.9,2-3,4.6-3,7.5c0,3.5,1.6,6.7,4.4,8.8C9.6,29.9,9.8,30,10,30h12 c0.2,0,0.4-0.1,0.6-0.2c2.8-2.1,4.4-5.3,4.4-8.8C27,18.1,25.9,15.4,24,13.5z M10,11.8V10c0-3.3,2.7-6,6-6s6,2.7,6,6v1.8 c-1.7-1.1-3.8-1.8-6-1.8S11.7,10.7,10,11.8z M22,20.1c-0.1,0-0.2,0-0.3,0c-0.4,0-0.8-0.3-1-0.7c-0.3-1.1-1.1-2-2-2.6 c-0.5-0.3-0.6-0.9-0.3-1.4c0.3-0.5,0.9-0.6,1.4-0.3c1.3,0.9,2.3,2.2,2.8,3.7C22.8,19.4,22.5,19.9,22,20.1z"></path></svg>Gym</span>
            </div>            
            <div class="hotel-card-footer">
                <div class="hotel-price">
                    <span class="price-amount">$450</span>
                    <span class="price-period">/ night</span>
                </div>
                <a href="#" class="hotel-cta">View Deal</a>
            </div>
        </div>
    </article>
</div>