Jetpack compose UI support for different screen sizes and Image crop from the top

Question

@Composable
fun MyScreen() {

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Image(
            painter = painterResource(id = R.drawable.background),
            contentDescription = null,
        )

        Spacer(modifier = Modifier.height(12.dp))

        Text(
            text = "This is a text",
        )

        Spacer(modifier = Modifier.height(12.dp))
        Spacer(modifier = Modifier.weight(1f))

        Button(onClick = {}) {
            Text(
                text = "Button",
            )
        }

        Spacer(modifier = Modifier.height(12.dp))

    }
}

I have a UI and sample code as above. I need to make some modifications to support that to small screens as below guidelines.

• 1 and 3 areas height is 12.dp
• 2 area minimum height should be 12.dp on small screens and height will be increased to fill the screen if there's space on large screens
• On all screens, even small images (portrait type) should match to width (keeping the image's original aspect ratio) and the extra height of the image from the top as 4 area should be cropped on small screens.

How can do this?