.hero-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    background: center top;
    height: 340px;
    padding: 0;
    background-position: 41% -27px;

    .over {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: fit-content;
        height: 287px;
        padding: 10px;
        box-shadow: none;

        .inner {
            border: 0;
            padding: 0;
        }

        .title {
            max-width: none;
            margin: 0 0 15px;

            .hero-img-ctn {
                padding: 0;

                img {
                    position: relative;
                    top: auto;
                    left: auto;
                    -ms-transform: initial;
                    transform: initial;
                    max-width: 280px;
                    width: 100%;
                }
            }
        }

        .sub {
            color: var(--color-white);
            font-family: var(--font-poppins);
            font-style: normal;
            font-weight: var(--font-weight-semi-bold);
            font-size: 14px;
            line-height: 22px;
            padding: 0 0 15px;
            margin: 0;
    
            a {
                color: var(--color-white);
                text-transform: none;
                text-decoration: underline;
    
                &:hover {
                    text-decoration: none;
                }
    
                &:after {
                    content: '';
                    border-width: 0 3px 3px 0;
                    border: solid var(var(--color-white));
                    border-radius: 1px;
                    width: 9px;
                    height: 9px;
                    margin-bottom: 1px;
                    top: calc(50% - 4px);
                    right: -15px;
                    transform: rotate(-45deg);
                    -ms-transform: rotate(-45deg);
                    -webkit-transform: rotate(-45deg);
                }
            }
        }

        .description {
            font-family: var(--font-poppins);
            font-size: 18px;
            font-weight: var(--font-weight-bold);
            line-height: 22px;
            margin: 0;

            a {
                display: none;
            }
        }
    }
}

/* 768px */
@media (min-width: 48em) {
    .hero-banner {
        .over {
            .sub {
                font-size: 16px;
            }
        }
    }
}

@media (min-width: 1049px) {
    .hero-banner {
        background: center center/cover no-repeat;
        flex-direction: unset;
        height: 625px;

        .over {
            margin: 0 90px 0 0;

            .title {
                .hero-img-ctn {
                    padding: 0;
    
                    img {
                        max-width: 380px;
                    }
                }
            }

            .sub {
                font-size: 19px;
            }
        }
    }
}