.hero_container {
    height: 500px;
    min-height: 500px;
    max-height: 500px;
}
.hero_container picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero_container picture img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* key */
  display: block;
}
.hero_card {
    position: absolute;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    min-width: 277px;
    max-width: 500px;
    padding: 24px;
    gap: 16px;
    flex: 1 0 0;
    margin: 60px;
    /* border: 1px solid rgba(255, 255, 255, .28); */
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .25); */
    /*background-blend-mode: plus-lighter;*/
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    /* backdrop-filter: blur(5px); */
    backdrop-filter: blur(25px);
    border-radius: var(--radius-component, var(--radius-xl, 12px));
}

.hero_image {
    width: 100%;
    height: 560px;
    display: block;
    object-fit: cover;
    border-radius: var(--radius-component, var(--radius-xl, 12px));
    z-index: 1;
}

/* Font variants */
.hero_card.CONTENT_DARK {
    color: var(--ink);
    background: rgba(var(--paper-rgb), 0.4);
}

.hero_card.CONTENT_LIGHT {
    color: var(--paper);
    background: rgba(var(--paper-rgb), 0.4);
}

.hero_card.CONTENT_PRIVATE {
    color: var(--paper);
    background: rgba(var(--ink-rgb), 0.8);
}

/* Promo text and stats */
.hero_card-text-block {
    margin-bottom: 1rem;
    width: 80%;
}

/* Stack stats on mobile */
.hero_stats:has(.stats) {
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
    width: 230px;
}

/* Make the last item span both columns if it's odd */
.hero_stats .stats:last-child:nth-child(odd) {
    grid-column: span 2;
}

.button-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Tablet (Portrait): 601px to 899px */
@media (min-width: 600px) and (max-width: 899px) {
    /* styles for tablets in portrait */
    .hero_container {
        height: 500px;
        min-height: 500px;
        max-height: 500px;
        flex-shrink: 0;
    }

    .hero_card {
        display: flex;
        min-width: 277px;
        max-width: 500px;
        width: 36%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        flex-shrink: 0;
    }
}




/* Phone: less than 600px */
@media (max-width: 599px) {
    /* styles for phones */
    .hero_container {
        height: 100vh;
        min-height: 560px;
        max-height: 560px;
        position: relative;
        /* overflow: hidden; */
        border-radius: var(--radius-component, var(--radius-xl, 12px));
        overflow: hidden;    
    }

.hero_card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 25px;

    z-index: 2;

    opacity: 0;
    transform: translateY(60px);

    transition: transform 0.6s ease, opacity 0.6s ease;
}

    .hero_stats:has(.stats) {
        display: grid;
        grid-template-columns: auto auto;
    }

.hero_image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60%;
    transform: scale(1.1);          /* 👈 start zoomed IN */
    transition: transform 1.2s ease;

    z-index: 1;
}
}