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

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

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

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

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

#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(500px - 2vw);
        height: calc(520px - 2vw);
    }
}

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

    #intro-container::before {
        width: 500px;
        height: 520px;
    }
}

@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;
    }
}