easybank-landing-page-master

I think you can achieve that background (in desktop mode) by playing with the background-size and background-position properties but you'd need to change your layout a little bit in some layers:

First, I'd make that header a fixed element:

.header {
    position: fixed;
    top: 0;
    background: #fff;
    height: 5rem;
    width: 100%;
    z-index: 1000;
    ...
}

Next, I'd limit the height of the first section:

.section--next {
    background-color: var(--Very-Light-Gray);
    height: 60vh;
    position: relative;
}

Then, I'd start laying out the background images, removing the <img> and using ::before and ::after pseudo elements to render the images:

.section--next__img {
    position: relative;
    width: 100%;
    height: 100%;
}

.section--next__img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0; // align to the right
    width: 35rem; // set a fixed width to work with
    height: 100%;
    background-image: url(./images/bg-intro-desktop.svg);
    background-size: 60rem; // play around til you get the desired size
    background-position: -50px -115px; // play around til you get the desired position
    background-repeat: no-repeat;
}

.section--next__img::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0; // align to the right
    width: 35rem; // set the same width as ::before
    height: 120%; // add 20% of additional height on this one
    background-image: url(./images/image-mockups.png);
    background-repeat: no-repeat;
    background-size: 35rem; // play around til you get the desired size
    background-position: 95px 0px; // play around til you get the desired position
}

and lastly I'd put the text of the first section on top of the background images:

.section--next__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.77rem;
    justify-content: center;
    position: absolute;
    z-index: 20;
    padding-top: 5rem;  // padding-top same height as the header 
    padding-left: 9.16rem;
    width: 100%;
    height: 100%;
}

Well done!

You can center the green underline of the links no matter the size of the link by doing this:

.nav__link:hover::before {
    ...
    right: 0;
    left: 0;
    margin: auto;
}