/* Block Media & Text */

/* Fix defaults */
.wp-block-media-text {
    position: relative;
    gap: 32px;
}

.wp-block-media-text .wp-block-media-text__content {
    height: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Squared image */
.lp-media-text-squared-image .wp-block-media-text__media {
    aspect-ratio: 1/1;
}

/* Rounded borders image */
.lp-media-text-rounded-image .wp-block-media-text__media img {
    border-radius: 20px;
}

/* Style - Purple star & blue cloud stickers */
.wp-block-media-text.is-style-purple-star-sticker .wp-block-media-text__media::before,
.wp-block-media-text.is-style-blue-cloud-sticker .wp-block-media-text__media::before {
    content: "";
    display: block;
    width: 90px;
    height: 90px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.wp-block-media-text.is-style-purple-star-sticker .wp-block-media-text__media::before {
    top: 0;
    left: 0;
    background-image: url('../images/sticker-star-purple.svg');
    background-position: top left;
    transform: translate(-10%, -50%);
}

.wp-block-media-text.is-style-blue-cloud-sticker .wp-block-media-text__media::before {
    bottom: 0;
    right: 0;
    background-image: url('../images/sticker-cloud-blue.svg');
    background-position: top right;
    transform: translate(10%, 50%);
}

@media (min-width: 768px) {
    .wp-block-media-text.is-style-purple-star-sticker .wp-block-media-text__media::before,
    .wp-block-media-text.is-style-blue-cloud-sticker .wp-block-media-text__media::before {
        width: 120px;
        height: 120px;
    }
}

@media (min-width: 1100px) {
    .wp-block-media-text.is-style-purple-star-sticker .wp-block-media-text__media::before,
    .wp-block-media-text.is-style-blue-cloud-sticker .wp-block-media-text__media::before {
        width: 180px;
        height: 180px;
    }

    .wp-block-media-text.is-style-purple-star-sticker .wp-block-media-text__media::before {
        transform: translate(-35%, -50%);
    }

    .wp-block-media-text.is-style-blue-cloud-sticker .wp-block-media-text__media::before {
        transform: translate(35%, 50%);
    }
}

@media (min-width: 1240px) {
    .wp-block-media-text.is-style-purple-star-sticker .wp-block-media-text__media::before {
        transform: translate(-50%, -50%);
    }

    .wp-block-media-text.is-style-blue-cloud-sticker .wp-block-media-text__media::before {
        transform: translate(50%, 50%);
    }
}