#cover {
    border-radius: 20px;
    min-height: 300px;
}

#cover img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.cover-banner-texts {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 8px;
}

@media (max-width: 768px) {
    .cover-banner-texts {
        position: relative;
    }
    #cover {
        min-height: max-content;
    }
        #cover img {
            border-radius: 16px;
            width: 100%;
        }
}

    .banner-title {
        color: white;
        font-size: 2rem;
        font-weight: 700;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        padding: 10px;
        box-shadow: 0 0 10px -1px #000;
        text-shadow: 0 0 10px #000;
        width: max-content;
        max-width: 100%;
        margin: 16px auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .banner-subtitle {
        color: white;
        font-size: 1.5rem;
        margin: 16px auto;
        font-weight: 600;
        width: max-content;
        max-width: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        padding: 10px;
        box-shadow: 0 0 16px -1px #000;
        text-shadow: 0 0 10px #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .banner-paragraph {
        /*color: white;*/
        font-size: 1rem;
        font-weight: 400;
        /*background-color: rgba(0, 0, 0, 0.3);*/
        border-radius: 5px;
        padding: 10px;
        width: 100%;
        max-width: 100%;
        margin: 16px 0;
        /*box-shadow: 0 0 16px -1px #000;*/
        word-break: break-word;
    }