#intro-container {
    min-height: 360px;
    overflow: hidden;
}

#intro-container::before {
    background: url("../../images/banners/01.c14b77db4506.webp") no-repeat top right/100%;
    width: calc(440px - 88px);
    height: calc(460px - 88px);
}

#intro-container:not(.animate)::before {
    animation: fade-in 1s both;
}

#intro-container .inner-content {
    width: 65%;
}

#intro-container .inner-content .title {
    overflow-wrap: anywhere;
    word-wrap: anywhere;
    margin: 0 0 1rem;
}

#intro-container .title>.inner-most-content:not(.animate) {
    animation: none;
}

#intro-container .inner-content>p {
    text-align: left;
    color: var(--black-a90);
    line-height: 1.475rem;
}

#intro-container .inner-content #hero-cta-btn:not(.animate) {
    animation: faded-slide-left-in 1s both 0.2s;
}

@media (max-width: 1841px) {
    #intro-container::before {
        width: calc(440px - 6vw);
        height: calc(460px - 6vw);
    }
}

@media (max-width: 1360px) {
    #intro-container {
        min-height: 450px;
    }

    #intro-container::before {
        width: 400px;
        height: 420px;
    }
}

@media (max-width: 1080px) {
    #intro-container .inner-content {
        background-color: var(--white-a80);
        width: 100%;
        padding: 2rem;
        border-radius: 1rem;
    }
}

@media (min-width: 301px) and (max-width: 400px) {

    .title.left-corner,
    .title.right-corner {
        padding-left: 15px;
    }
}

@media (max-width: 500px) {
    #intro-container .inner-content {
        padding: 1.5rem;
    }
}

@media (max-width: 400px) {
    article .wrapper {
        padding-left: 0.125rem;
        padding-right: 0.125rem;
    }
}

@media (max-width: 300px) {
    #intro-container .inner-content {
        padding: 1.5rem 1rem;
    }
}