.right-zero-block{
	overflow-x: clip;
}

.right-zero-block__shape--right::before {
    content: '';
    background-color: var(--secondary-palette-white);
    background-image: url("../png/right-zero-bg-pattern.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 0 0 120px;
    border: 1px solid var(--primary-palette-yellow);
    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 15%);
    z-index: -1;
}

.right-zero-block__shape--left::before{
    content: '';
    background-color: var(--secondary-palette-white);
    background-image: url('../svg/right-zero-shape-left-sand-dune.svg');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 0 120px;
    border: 1px solid var(--secondary-palette-cool-grey);
    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 15%);
    z-index: -1;
}

.card_media--top{
	position: relative;
	top:-50px;
}

@media only screen and (width >= 992px) {
    .right-zero-block__variant--dark {
        background: linear-gradient(180deg, var(--secondary-palette-warm-grey-100) 50%, var(--secondary-palette-dark-grey) 50%);
    }

    .right-zero-block__variant--light {
        background: linear-gradient(180deg, var(--secondary-palette-white) 50%, var(--secondary-palette-warm-grey-100) 50%);
    }

    .right-zero-block--variant-light-dark{
        background: linear-gradient(180deg, rgb(255 255 255 / 0%) 50%, var(--secondary-palette-dark-grey) 50%);
    }

    .right-zero-block--variant-light-gray{
        background: linear-gradient(180deg, var(--secondary-palette-white) 50%, var(--secondary-palette-cool-grey-100) 50%);
    }

	.right-zero-block--variant-transparent-grey{
		background: linear-gradient(180deg, transparent 50%, var(--secondary-palette-dark-grey) 50%);
	}
}

@media only screen and (width <= 991.98px) {
    .right-zero-block__shape--right::before {
        width:100%;
        background-position: top center;
        background-size: cover;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .right-zero-block__shape--left::before {
        width: 100%;
        background-position: top center;
        background-size: cover;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}

@media only screen and (width <= 575.98px) {
    .right-zero-block__shape--right::before {
        background-image: url("../png/right-zero-bg-pattern-mobile.png");
    }
}

@media only screen and (width <= 767.98px) {
    .right-zero-block__shape--right::before {
        width: 100%;
        background-position: top center;
        background-size: cover;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

	.right-zero-block__shape--left::before{
        box-shadow: 0px 4px 4px 0px #00000026;
	}
}

@media only screen and (width >= 576px) and (width <= 767.98px) {
    .right-zero-block__shape--right::before {
        background-image: url("../png/right-zero-bg-pattern-tablet.png");
    }
}

@media only screen and (width >= 992px) {
	.right-zero-block__shape--right::before {
		right: -36%;
		width: calc(100% + 335px);
	}

    .right-zero-block__shape--left::before {
        left: -36%;
        width: calc(100% + 335px);
    }
}

@media only screen and (width >= 1200px) {
	.right-zero-block__shape--right::before {
		right: -30%;
		width: calc(100% + 335px);
	}

    .right-zero-block__shape--left::before {
        left: -30%;
        width: calc(100% + 335px);
    }
}

@media only screen and (width >= 1400px) {
	.right-zero-block__shape--right::before {
		right: -65%;
		width: calc(100% + 850px);
	}

    .right-zero-block__shape--left::before {
        left: -65%;
        width: calc(100% + 850px);
    }
}

@media only screen and ( width >= 3024px) {
	.right-zero-block__shape--right::before {
		right: -110%;
		width: calc(100% + 1450px);
	}

    .right-zero-block__shape--left::before {
        left: -110%;
        width: calc(100% + 1450px);
    }
}
