.banner-simple {
    display: block;

    .banner {
        position: relative;
        display: block;

        .banner-simple__image-wrapper {
            width: 100%;
            img {
                max-height: 20rem;
            }
        }

        .mask-image {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

        .banner-simple__image-wrapper:first-child .mask-image {
            mask-image: linear-gradient(white, transparent);
        }

        .banner-simple__image-wrapper:last-child .mask-image {
            mask-image: linear-gradient(transparent, white);
        }

        .banner__text-wrapper {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: var(--theme-color-primary);
            padding: 5rem 2rem;
            width: 90%;
            clip-path: polygon(0% 0%, 100% 10%, 100% 90%, 70% 100%, 0% 90%);
            z-index: 1;

            .description {
                font-size: 2.6rem;
                color: var(--theme-color-black-800);
                text-align: center;
                line-height: 3.6rem;
                margin-bottom: 2rem;
            }
            .button {
                padding: 1.5rem 4rem;
                color: var(--theme-color-white);
                background-color: var(--theme-color-black-900);
            }
        }
    }

    @media (min-width: 1024px) {
        .banner {
            display: flex;

            .banner-simple__image-wrapper {
                width: 50%;
                
                img {
                    max-height: 25rem;
                }
            }
            .banner-simple__image-wrapper:first-child .mask-image {
                mask-image: linear-gradient(to left, transparent, white);

            }
            .banner-simple__image-wrapper:last-child .mask-image {
                mask-image: linear-gradient(to right, transparent, white);
            }
            .one-image {
                width: 100%;
            }
            
            .banner__text-wrapper {
                max-width: 33%;
            }
        }
    }
}