/* <div class="listing-flexbox">
        <!-- {if HAS_LISTING_IMAGE/}
            <div class="listing-images-container">
                <img class="listing-image"src="#CLEAN_IMAGE_URL#" alt="Seed Image">
            </div>
        {endif/} -->
        <div class="listing-details">
            <h1>#VARIETY_NAME#</h1>
            <p>#PLANT_TYPE_STRING#</p>
            <p>#DESCRIPTION#</p>
            <h2>$#PRICING#</h2>
            #REQUESTNOWBUTTON#
            #ADDTOWISHLISTBUTTON#
            #REMOVEFROMWISHLISTBUTTON#
            <br>
            #COMPAREWITHOTHERLISTINGSBUTTON#
        </div>

        <div class="lister-info">
            {if USER_LOGGED_IN/}
                <img class="profile-image" src="#CLEAN_PROFILE_IMAGE_URL#" alt="Profile Image">
                <div class="name">#LISTER_NAME#</div>
            {endif/}
            <div>#LISTER_LOCATION#</div>
            {if USDA_ZONE /}<div>USDA Hardiness: #USDA_ZONE#</div>{endif /}
            #LISTERPROFILEBUTTON#
        </div>
*/

/* .listing-images-container {
    flex: 2;
    .listing-image {
        width: 90%;
        height: auto;
    }
} */

.listing-flexbox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    gap: calc(var(--ut-grid-gutter-width, .5rem) * 2);

    @media screen and (max-width: 768px) {
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .listing-details {
        flex: 4;
        display: flex;
        flex-direction: column;
        gap: var(--ut-grid-gutter-width, .5rem);
        
        > * {
            width: fit-content;
        }
        
        .price {
            font-size: 2rem;
            font-family: var(--heading-family);
            color: var(--branding-primary);
        }
        .buttons {
            display:flex;
            flex-direction: column;
            gap: calc(var(--ut-grid-gutter-width, .5rem) * 2);
            --a-button-gap-x: 0;

            & > * {
                display: block;
                max-width: fit-content;
            }

            @media screen and (max-width: 768px) {
                /* flex-direction: row; */
                align-items: center;
            }
        }
    }

    .lister-info {
        flex: 1;
        flex-direction: column;
        align-items: center;
        gap: var(--ut-grid-gutter-width, .5rem);

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content;
        grid-template-areas: 
            "image"
            "name"
            "location"
            "profile";


        .profile-image {
            grid-area: image;
            width: 220px;

        }
        .name {
            grid-area: name;
            font-size: 1.5rem;
            font-family: var(--heading-family);
            align-items: center;
            /* balanced text; */
            text-wrap: balance;
            text-align: center;
        }


        @media screen and (max-width: 768px) {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            .profile-image {
                grid-area: image;
                width: 100%;
            }
            /* grid-template-columns: min-content 1fr;
            grid-template-areas: "image name"
                "image location"
                "image profile"
                "image ."
                "image .";
            gap: 1rem; */
        }
    }
}