<script>
    export let serviceImage = '/default_image.jpg';
    export let serviceImageAlt = 'Image';
</script>

<style>

.image{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2em;
    width: 80%;
    height: 0;
    padding-top: 60%;
    overflow: hidden;
    z-index: 0;
}

.image>img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
    transition: 0.2s;
}

.image>img:hover{
    transform: scale(1.1);
}

@media (min-width: 900px){

    .image{
        padding-top: 33%;
    }
}

</style>

<div class="image">
    <img src={serviceImage} alt={serviceImageAlt}>
</div>