.legends-banner {
    text-align: center;
    background-color: #1e0e36;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 643px;
    display: flex
}

@media (min-width: 768px) {
    .legends-banner__container {
        background-image: none;
    }

    .legends-banner {
        text-align: left;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: "";
        justify-content: flex-start;
        align-items: start;
        min-height: 552px
    }
}

@media (min-width: 1025px) {
    .legends-banner {
        min-height: 640px
    }
}

@media (min-width: 1553px) {
    .legends-banner {
        min-height: 815px
    }
}

@media (min-width: 2001px) {
    .legends-banner {
        background-size: contain
    }
}

.legends-banner__content {
    padding: 104px 16px 0
}

@media (min-width: 768px) {
    .legends-banner__content {
        width: 100%;
        max-width: 430px;
        padding: 120px 0 0 40px
    }
}

@media (min-width: 1025px) {
    .legends-banner__content {
        max-width: 620px;
        padding: 120px 0 0 80px
    }
}

.legends-banner__date {
    text-transform: uppercase;
    color: #ffdd3c;
    margin-bottom: 8px
}

@media (min-width: 768px) {
    .legends-banner__date {
        margin-bottom: 24px
    }
}

.legends-banner__title {
    color: #fff;
    width: 100%;
    margin-top: 0;
    margin-bottom: 8px;
    padding: 0 18px
}

@media (min-width: 768px) {
    .legends-banner__title {
        margin-bottom: 16px;
        padding: 0
    }
}

.legends-banner__title span {
    color: #ffdd3c
}

.legends-banner__subtitle {
    color: #fff;
    width: 100%;
    margin-bottom: 24px
}

.legends-banner__container {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: "";
    flex-direction: column;
    width: 100%;
    min-height: 399px;
    padding: 0 16px 24px;
    display: flex
}

@media (min-width: 360px) {
    .legends-banner__container {
        min-height: 500px
    }
}

@media (min-width: 460px) {
    .legends-banner__container {
        min-height: 700px
    }
}

@media (min-width: 690px) {
    .legends-banner__container {
        min-height: 780px
    }
}

@media (min-width: 768px) {
    .legends-banner__container {
        background-image: none !important;
        min-height: auto;
        margin-top: auto;
        padding: 0 0 64px 40px
    }

    .webp-supported .legends-banner__container {
        background-image: none
    }
}

@media (min-width: 1025px) {
    .legends-banner__container {
        padding: 0 0 64px 80px
    }
}

.legends-banner__btn {
    height: 48px
}

@media (min-width: 768px) {
    .legends-banner__btn {
        max-width: 213px
    }
}

.legends-banner__caption {
    margin-top: auto
}

@media (min-width: 768px) {
    [lang=ar] .legends-banner {
        text-align: right;
        background-image: "";
    }

    [lang=pk] .legends-banner {
        text-align: right;
        background-image: "";
    }

    [lang=ar] .legends-banner__content {
        padding: 120px 40px 0 0
    }

    [lang=pk] .legends-banner__content {
        padding: 120px 40px 0 0
    }
}

@media (min-width: 1025px) {
    [lang=ar] .legends-banner__content {
        padding: 120px 80px 0 0
    }

    [lang=pk] .legends-banner__content {
        padding: 120px 80px 0 0
    }
}

@media (min-width: 768px) {
    [lang=ar] .legends-banner__container {
        padding: 0 40px 64px
    }

    [lang=pk] .legends-banner__container {
        padding: 0 40px 64px
    }
}

@media (min-width: 1025px) {
    [lang=ar] .legends-banner__container {
        padding: 0 80px 64px 0
    }

    [lang=pk] .legends-banner__container {
        padding: 0 80px 64px 0
    }

    [lang=ru] .legends-banner__content {
        max-width: 660px
    }
}