/* Set cards to full width by default (for xs and sm) */
.card-container {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0em; /* Adjust padding as needed */
    background-color:transparent;
}

/* At the md breakpoint, adjust cards to 1/3 width */
@media (min-width: 768px) { /* Adjust based on MudBlazor's md breakpoint */
    .card-container {
        flex: 0 0 31.75%;
        max-width: 31.75%;
        background-color:transparent;
    }
}

/* At the lg breakpoint, adjust cards to 1/4 width */
@media (min-width: 1280px) { /* Adjust based on MudBlazor's lg breakpoint */
    .card-container {
        flex: 0 0 23.75%;
        max-width: 23.75%;
        background-color:transparent;
    }
}

.responsive-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
}

.image-fit-container {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* Adjust as needed; 'cover' fills the container without breaking the aspect ratio */
    display: block; /* Remove extra space below the image */
    margin: auto; /* Center the image within the container */
}
.pswp__custom-caption {
    background: rgba(0,0,0, 0.8);
    font-size: 14px;
    color: #fff;
    width: calc(100% - 32px);
    max-width: 600px;
    padding: 2px 8px;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    text-align: center;
}
.pswp__custom-caption a {
    color: #000;
    text-decoration: underline;
}

.custom-autocomplete-zindex .mud-popover {
    z-index: 2000 !important;
}
.mud-popover {
    z-index: 2000 !important;
}



.hero-swiper  {
    width:100%;
    padding-top: 75%;
    background-color: white;
}

.grid-container-sm {
    display: grid;
}

.grid-container-md {
    display: none
}

/*mobile size*/
.hero-swiper-featuredlistings  {
    width:100%;
    height:400px;
    /*padding-top: 75%;*/
    background-color: white;
}

.grid-container-featuredlistings-sm {
    display: grid;
}

.grid-container-featuredlistings-md {
    display: none
}


@media (min-width: 768px) {
    .hero-swiper  {
        height:400px;background-color: white;
    }
    
    .grid-container-sm {
        display: none;
    }

    .grid-container-md {
        display: grid;
        grid-template-columns: auto 250px 250px; /* large-area takes remaining space, two columns for squares */
        grid-template-rows: auto auto; /* Two rows, each 200px high for the squares */
        gap: 2px; /* Space between grid items */
        height: 100%;
    }

    .hero-swiper-featuredlistings  {
        height:400px;background-color: white;
    }

    .grid-container-featuredlistings-sm {
        display: none;
    }

    .grid-container-featuredlistings-md {
        display: grid;
        gap: 2px; /* Space between grid items */
        height: 100%;
    }
}


.large-area {
    grid-column: 1 / 2; /* Span the first column */
    grid-row: 1 / 3; /* Span two rows */
    /* Additional styling for demonstration */
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensures content does not overflow the container size */
}

.square {

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
    color: white;
    /* Text alignment and visibility */
    text-align: center;
    aspect-ratio: 4 / 3;
}

.image-container {
    width: 100%; /* or any specific width */
    height: 100%; /* or any specific height */
    overflow: hidden; /* Ensures that any excess image is clipped */
    position: relative; /* Establishes a containing block for absolute positioning */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Scales the image to maintain aspect ratio while filling the container */
    position: absolute; /* Allows the image to be fully contained by its parent */
    top: 0;
    left: 0;
}



/*New Hero*/
.grid-container-md-hero {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 75% image, 25% video for <768px */
    width: 100%;
    gap: 2px; /* Smaller gap for mobile */
    border-radius: 16px; /* Rounded corners for the grid container */
    overflow: hidden; /* Clip child elements to rounded corners */
}

.grid-container-md-hero .image-container {
    overflow: hidden; /* Ensure image respects rounded corners */
}

.grid-container-md-hero .mud-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers its area */
    display: block; /* Remove any inline spacing */
}

.grid-container-md-hero .video-container {
    position: relative;
    padding-bottom: 177.78%; /* 9:16 portrait aspect ratio (16/9 = 177.78%) */
    height: 0;
    overflow: hidden; /* Ensure video respects rounded corners */
}

.grid-container-md-hero .video-container .video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 768px) {
    .grid-container-md-hero {
        grid-template-columns: 3fr 1fr; /* 2/3 image, 1/3 video for >=768px */
        gap: 2px; /* Larger gap for desktop */
    }

    .grid-container-md-hero .video-container {
        /*padding-bottom: 56.25%;  16:9 landscape aspect ratio (9/16 = 56.25%) */
    }
}

.logo-sticker-eai {
    width: 21% !important;height:23% !important;position: absolute !important;top: 15px !important;left: 15px !important; z-index: 10 !important
}
@media (max-width: 600px) {
    .logo-sticker-eai {
        width: 21% !important;height:23% !important;position: absolute !important;top: 8px !important;left: 8px !important; z-index: 10 !important
    }
}