@media only screen and (max-width:575px) {
       .carousel-inner {
        display: flex;
    }

    .promo-content {
        width: 90vw;
        height: 90vh;
        max-width: fit-content;
    }

    .carousel-item {
        margin: 0 auto;
        width: 100%;
        transition: transform 400ms linear, opacity 500ms linear
    }

    .banner {
        height: 300px;
        width: 520px;
        background-size: cover;
        overflow: hidden;
        margin: auto;
        border-radius: 5px;
        position: relative;
    }
    .modal.show .modal-dialog{
        margin: auto;
    }

    .promo-description {
        position: absolute;
      bottom: 11%;
        height: 24px;
    }
    .hor-line{
        margin: 1em 1em 4em 1em;
    }

    .carousel-indicators{
        position: absolute;
        bottom: 12%;
    }


    button.close-promo {
        position: absolute;
        cursor: pointer;
        right: 30px;
        background-color: #000;
        z-index: 3;
        border-radius: 25px;
        top: 27px;
        color: #fff;
        width: 23px;
    }

}

@media only screen and (min-width:576px) {
       .carousel-inner {
        display: flex;
    }

    .promo-content {
        width: 80vw;
        height: 75vh;

    }

    .carousel-item {
        margin: 0 auto;
        width: 100%;
        transition: transform 400ms linear, opacity 500ms linear
    }

    .banner {
        height: 48vh;
        width: 100vw;
        background-size: cover;
        overflow: hidden;
        margin: auto;
        border-radius: 5px;
        position: relative;
    }

    .promo-description {
        position: absolute;
        bottom: 6%;
        overflow-y: hidden;
    }
    .hor-line{
        margin: 1em 1em 4em 1em;
    }

    button.close-promo {
        position: absolute;
        cursor: pointer;
        right: 30px;
        background-color: #000;
        z-index: 3;
        border-radius: 25px;
        top: 27px;
        color: #fff;
        width: 23px;
    }

    .carousel-indicators{
        position: absolute;
        bottom: 15%;
    }
}

@media only screen and (min-width:900px) {
       .carousel-inner {
        display: flex;
    }

    .promo-content {
        width: 80vw;
        height: 600px;

    }

    .carousel-item {
        margin: 0 auto;
        width: 100%;
        transition: transform 400ms linear, opacity 500ms linear
    }

    .banner {
        height: 450px;
        width: 1000px;
        background-size: cover;
        overflow: hidden;
        margin: auto;
        border-radius: 5px;
        position: relative;
    }

    .promo-description {
        position: absolute;
      bottom: 6%;
    }
    .hor-line{
        margin: 1em 1em 4em 1em;
    }

    button.close-promo {
        position: absolute;
        cursor: pointer;
        right: 30px;
        background-color: #000;
        z-index: 3;
        border-radius: 25px;
        top: 27px;
        color: #fff;
        width: 23px;
    }

    button.close-promo {
        position: absolute;
        cursor: pointer;
        right: 30px;
        background-color: #000;
        z-index: 3;
        border-radius: 25px;
        top: 27px;
        color: #fff;
        width: 23px;
    }

    .carousel-indicators{
        position: absolute;
        bottom: 8%;
    }
}

@media only screen and (min-width:1300px) {
       .carousel-inner {
        display: flex;
    }

    .promo-content {
        width: 900px;
        height: 600px;
        background-blend-mode: multiply;
    }

    .carousel-item {
        margin: 0 auto;
        width: 100%;
        transition: transform 400ms linear, opacity 500ms linear
    }

    .banner {
        height: 500px;
        width: 859px;
        background-size: cover;
        overflow: hidden;
        margin: auto;
        border-radius: 5px;
        position: relative;
    }

    .promo-description {
        position: absolute;
        bottom: 7%;
    }

    button.close-promo {
        position: absolute;
        cursor: pointer;
        right: 30px;
        background-color: #000;
        z-index: 3;
        border-radius: 25px;
        top: 27px;
        color: #fff;
        width: 23px;
    }

    .carousel-indicators{
        position: absolute;
        bottom: 8%;
    }
}

button.close-promo:hover{
    color: transparent;
}

.modal.show .modal-dialog{
    max-width: fit-content;
}
.carousel-indicators li{
    background-color: black;
}

.banner{
    object-fit: cover ;
}