.hero-how {
    background: url(https://cdn.foracredit.ca/web/site/how-hero-bg-mob.webp) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 600px;
    width: 100%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.foracredit.ca/web/site/how-hero-bg-mob.webp', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.foracredit.ca/web/site/how-hero-bg-mob.webp', sizingMethod='scale')";
}

.how-list li {
    list-style-image: url(https://cdn.foracredit.ca/web/site/green-checkmark.webp);
    padding-inline-start: .5ch;
    margin-top:1.3em;
}

.outer-circle {
    width: 75px;
    height: 75px;
    background-color: #FBF0F0;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-circle {
    width: 35px;
    height: 35px;
    background-color: #D16666;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 400;
}

.dotted-line {
    width: 0.25px;
    height: 120%;
    background-color: transparent;
    border-left: 3px dotted #F9CA06;
    margin: 0 auto;
    transform: translate(-38px, 70px);
    z-index: -1;
}

@media (max-width: 350px) {
    .dotted-line {  
        width: 0.25px;
        height: 110%;
        background-color: transparent;
        border-left: 3px dotted #F9CA06;
        margin: 0 auto;
        transform: translate(-38px, 90px);
        z-index: -1;
    }   
}

@media (min-width: 768px) {
    .hero-how {
        background: url(https://cdn.foracredit.ca/web/site/how-hero-bg.webp) no-repeat center bottom;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        min-height: 300px;
        width: 100%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.foracredit.ca/web/site/how-hero-bg.webp', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdn.foracredit.ca/web/site/how-hero-bg.webp', sizingMethod='scale')";
    }
    .gridline-top{
        background:url(https://cdn.foracredit.ca/web/site/teal-line-top.webp) no-repeat center top;
        height:250px;
        width:100%;
    }
    .gridline-teal{
        background:url(https://cdn.foracredit.ca/web/site/teal-line.webp) no-repeat center top;
        height:250px;
        width:100%;
    }
    .gridline-teal-h{
        background:url(https://cdn.foracredit.ca/web/site/teal-line-h.webp) repeat-x center top;
        height:9px;
    }
}