.jumbotron {
    position: relative;
    margin: {
        top: map-get($spacers, 6);
        bottom: map-get($spacers, 6);
    }

    &__image {
        img {
            width: 100%;
            display: block;
        }
    }

    /*
    // @TODO: Przenieść do fillup
    &:nth-of-type(even) {
        h1, h2, h3, h4, strong {
            color: $primary;
        }
    }

    &:nth-of-type(odd) {
        h1, h2, h3, h4, strong {
            color: $secondary;
        }
    }
    */

    @each $color, $value in $theme-colors {
        &.bg-#{$color} {
            color: $white;

            &::before {
                content: ' ';
                height: 100%;
                width: 100vw;
                position: absolute;
                top: 0;
                margin-left: 50%;
                background-color: $value;
                transform: translateX(-50%);
            }

            a {
                color: inherit;
            }
        }

        &.text--#{$color} {
            h1, h2, h3, h4, strong {
                color: $value;
            }
        }
    }

    &.image--small &__image {
        img {
            width: auto;
            bottom: auto;
        }
    }


    &.bg-light {
        h1, h2, h3, h4, h5, strong {
            color: $secondary;
        }

        .btn {
            @include button-outline-variant($secondary);
        }
    }

    [class*="col-"] {
        padding: {
            top: map-get($spacers, 5);
            bottom: map-get($spacers, 5);
        }
    }

    &[class*="bg-"]:not(.bg-light) {
        &, h1, h2, h3, h4, h5, strong {
            color: $white;
        }
    }
}

@include media-breakpoint-up(lg) {
    .jumbotron {
        &__image {
            width: 100%;
            height: 100%;
            display: flex;
            position: relative;
            align-items: flex-end;
            flex-direction: column;
            justify-content: center;

            img {
                right: 0;
                width: auto;
                max-width: 100%;
                position: relative;
                display: inline-block;
            }

            /*
            // @TODO: Przenieść do fillup
            img {
                height: 16rem;
                //bottom: map-get($spacers, 5);
                //position: absolute;
            }
            */
        }

        &.image--small &__image {
            img {
                height: 100%;
            }
        }

        @if $enable-jumbotron-swap {
            &:nth-of-type(even) {
                .row {
                    flex-direction: row-reverse;
                }
            }
    
            &:nth-of-type(even) &__image {
                align-items: flex-start;
    
                img {
                    left: 0;
                    right: auto;
                }
            }
        }
    }
}

@include media-breakpoint-down(md) {
    .jumbotron {
        .row {
            flex-direction: column-reverse;
        }

        &__image {
            height: auto;
            margin: {
                top: map-get($spacers, 4);
                bottom: map-get($spacers, 0);
            }

            img {
                max-width: 50%;
                margin: {
                    left: auto;
                    right: auto;
                }
            }
        }
    }
}

// .jumbotron {
//     margin-top: map-get($spacers, 5) * 2;
//     color: $white;
//     border-radius: 0;
//     background-color: $primary;


//     .title {
//         color: inherit;
//     }

//     .image {
//         width: 100%;
//         height: 100%;
//         position: relative;

//         img {
//             right: 0;
//             bottom: 0;
//             width: 100%;
//             position: absolute;
//         }
//     }

//     &.platnik {
//         background-color: $blue;
//     }

//     &.reverse .row {
//         flex-direction: row-reverse;
//     }
// }