Image not Responsive in Custom Block in wordpress

Question

I'm not sure what I'm doing wrong. Can anyone help? I have genesis custom block that I'm using to create a custom cover block. I cannot seem to get the image to stay full height and focus on a specific area of the image instead of it shrinking the image down to a width of 100% on mobile and my text goes everywhere. I want the text to remain over the image just like a cover... so the image on mobile should be at 100% height, but the width should shrink with the window.

https://codepen.io/christopherm007/pen/MWGrBGy

HTML

<section class="alignfull custom-cover-block">
    <div class="custom-cover-block-wrapper ">
            <img src="{{cover-image}}" alt="" class="custom-cover-block-image">
        <div class="custom-cover-block-content">
         <div class="custom-cover-title-background"><h2><span class="custom-cover-block--title">{{title}}</span></h2></div>
            <p class="custom-cover-block--comment">{{comment}}</p>
            <div class="custom-cover-block--text"><p>{{description}}</p></div>
           <div class="cover-buttons-wrapper"><div class="wp-block-button"><a href="{{button-1-url}}">{{button-1}}</a></div><div class="wp-block-button"><a  href="{{button-2-url}}">{{button-2}}</a></div>
        </div>
    </div></div>
</section>

CSS

.custom-cover-block {
}
    
.custom-cover-block-wrapper {
    position: relative;
    display: flex;
    justify-content: left;
    max-width: 100%;

}
img.custom-cover-block-image {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    -o-object-fit: cover;
    object-fit: cover;
    outline: none;
    border: none;
    box-shadow: none;
    z-index:0;
}
.cover-buttons-wrapper {
}
.custom-cover-block-content {
    margin: 0;
    position: absolute;
    text-align: left;
    max-width:40%;
    padding-left: var(--wp--custom--spacing--outer);
    padding-right: var(--wp--custom--spacing--outer);
}



.custom-cover-block--comment {
    font-family: var(--wp--preset--font-family--alkaline);
    font-size: clamp(2.75rem, 6vw, 3.25rem);
    font-weight: 700;
    text-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    padding-right: 1rem;
    color: var(--wp--preset--color--background);
    letter-spacing:2px;
    padding-top: 50px;
    margin:0px;
}
.custom-cover-block--title {
    color: var(--wp--preset--color--background);
    font-weight: 700;
    font-style: uppercase;
    font-size: var(--wp--preset--font-size--large);
    background: #f89728;
    padding: 10px;
    letter-spacing: 2px;
    box-shadow: 5px 6px var(--wp--preset--color--primary);
}
.custom-cover-block--text {
    font-size: 1.7rem;
    font-weight: 600;
    max-width: 100%;
}
.wp-block-button {
    display: inline-block;
    margin:20px;

}
.custom-cover-title-background {
    margin-left: -60px;
}

    .custom-cover-block {
}
    
.custom-cover-block-wrapper {
    position: relative;
    display: flex;
    justify-content: left;
    max-width: 100%;

}
img.custom-cover-block-image {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    -o-object-fit: cover;
    object-fit: cover;
    outline: none;
    border: none;
    box-shadow: none;
    z-index:0;
}
.cover-buttons-wrapper {
}
.custom-cover-block-content {
    margin: 0;
    position: absolute;
    text-align: left;
    max-width:40%;
    padding-left: var(--wp--custom--spacing--outer);
    padding-right: var(--wp--custom--spacing--outer);
}

.custom-cover-block--comment {
    font-family: var(--wp--preset--font-family--alkaline);
    font-size: clamp(2.75rem, 6vw, 3.25rem);
    font-weight: 700;
    text-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    padding-right: 1rem;
    color: var(--wp--preset--color--background);
    letter-spacing:2px;
    padding-top: 50px;
    margin:0px;
}
.custom-cover-block--title {
    color: var(--wp--preset--color--background);
    font-weight: 700;
    font-style: uppercase;
    font-size: var(--wp--preset--font-size--large);
    background: #f89728;
    padding: 10px;
    letter-spacing: 2px;
    box-shadow: 5px 6px var(--wp--preset--color--primary);
}
.custom-cover-block--text {
    font-size: 1.7rem;
    font-weight: 600;
    max-width: 100%;
}
.wp-block-button {
    display: inline-block;
    margin:20px;

}
.custom-cover-title-background {
    margin-left: -60px;
}

Answer 1

there is a margin added to your body tag please remove it

just add below css

 body{
  margin:0px
}