@media only screen and (min-width: 768px) {
    #banner {
        height: 350px;
        margin-bottom: 96px;
    }
    
    #banner .banner-container {
        max-width: 1024px;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 32px;
        margin-right: 0px;
        flex-direction: row;
        column-gap: 64px;
    }
    
    #banner .title-wrapper {
        width: 35%; 
        height: 100%;
        padding-bottom: 0px;
        margin-top: 1%;
        align-items: flex-start;
    }

    #banner .text {
        text-align: left;
        display: inline;
    }

    #banner .text-wrapper {
        margin-top: 24px;
    }
    
    #banner .content {
        width: 50%;
        align-items: flex-start;
    }
    
    #banner .title {
        max-width: 350px;
        text-align: right;
    }

    #banner img {
        height: clamp(150px, 25vw, 250px);
        margin-top: 64px;
        display: flex;
    }
}