How do I make a ImageCard with a "footer" in Jetpack Compose that is dynamic depending on the size of the image?

Question

I am using Compose and i'm trying to make an ImageCard with a kind of "footer" that displays the title and description

I am having some problems because either the "footer" is not the same size as the image or the image is not showed entirely because the footer overlaps it.

This is my code:

@Composable
fun ImageCard2(
    url: String,
    title: String,
    description: String,
    modifier: Modifier = Modifier
) {
    val imageLoader = LocalContext.current.imageLoader.newBuilder()
        .logger(DebugLogger())
        .build()

    Box(
        modifier = modifier
    ) {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .placeholder(R.drawable.logoserbatic)
                .data(url)
                .build(),
            contentDescription = null,
            imageLoader = imageLoader,
            contentScale = ContentScale.Fit,
            modifier = Modifier
                .align(Alignment.Center)
                .fillMaxWidth()
        )

        Surface(
            modifier = Modifier
                .height(120.dp)
                .align(Alignment.BottomCenter)
                .clip(shape = RoundedCornerShape(0.dp, 0.dp, 16.dp, 16.dp)),
            color = colorResource(id = R.color.serbatic_blue)
        ) {
            Column(
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxSize()
            ) {
                Text(
                    text = title,
                    style = TextStyle(
                        color = Color.White,
                        fontSize = 30.sp
                    ),
                    modifier = Modifier.padding(bottom = 4.dp)
                )
                Text(
                    text = description,
                    style = TextStyle(
                        color = Color.White,
                        fontSize = 18.sp
                    ),
                )
            }
        }
    }
}

This is what happens with ContentScale.Fit, ContentScale.Crop or ContentScale.FillBounds:

Note how the image isn't completely show and the "footer" it's overlapping it.

This happens with no ContentScale or with ContentScale: Inside

Note how the image is neither showed completely nor the footer is the same size.

What I want is the footer being the same size of the image always, independently from the width or height of the image and of course the image must be always shown completely. (the images come from an API), altough in this case for trial and error i'm using lorem picsum