@media only screen and (min-width: 0px) {
    #banner {
        height: 300px;
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 64px 0px 48px 0px;
    }
    
    #banner .banner-container {
        width: 100%;
        max-width: 425px;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 24px;
        padding-right: 24px;
    }
    
    #banner .title-wrapper {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding-bottom: 48px;
    }
    
    #banner .content {
        width: 100%;
        display: flex;
        align-items: center;
    }
    
    #banner .content-container {
        margin-bottom: -50%;
    }
    
    #banner .title {
        width: 100%;
        font-size: clamp(2.7rem, 2vw, 3rem);
        font-weight: 700;
        text-align: center;
        color: var(--blue-color-shade-7);
        letter-spacing: -2px;
        line-height: 70px;
        font-family: 'Judson', serif;
    }
    
    #banner .text {
        font-size: clamp(16px, 2vw, 24px);
        color: var(--blue-color-shade-6);
        line-height: 24px;
        text-align: center;
        width: 100%;
        display: flex;
    }
    
    #banner img {
        height: clamp(75px, 25vw, 170px);
        width: auto;
        float: right;
        position: relative;
        display: none;
    }
    
    #banner .text-wrapper {
        margin-top: -40px;
    }
}

@media only screen and (max-width: 300px) {
    #banner img {
        display: none;
    }

    #banner .text {
        text-align: center;
        display: flex;
        width: 100%;
    }
}