/* Put chevrons on the slider wrapper */
.wp-block-ymca-slider.is-style-content-slider {
    position: relative;
    overflow: visible;
}

/* Chevron base */
.wp-block-ymca-slider.is-style-content-slider::before,
.wp-block-ymca-slider.is-style-content-slider::after {
    content: "";
    position: absolute;
    background-color: var(--primary-lt);
    mask-image: url('data:image/svg+xml;utf8,<svg id="Layer_2" fill="currentColor" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154.82 223.26"><g id="Layer_1-2" data-name="Layer 1"><path d="M0,23.58v176.08c0,13.04,8.18,23.6,18.3,23.6,3.15,0,6.09-.89,8.68-2.83l118.67-88.37c5.48-4.08,9.17-11.7,9.17-20.44,0-8.73-3.69-16.34-9.17-20.41L26.98,2.83C24.39.89,21.44,0,18.3,0,8.2,0,0,10.56,0,23.58h0Z"/></g></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    pointer-events: none;
    z-index: 3;

    transform: rotate(90deg);

    display: none !important;
}

/*animations*/
.wp-block-ymca-slider.is-style-content-slider::before {
    animation: floating-1 4s ease-in-out infinite;
}
@keyframes floating-1 {
    from {
        transform: rotate(2deg) translate(0, 0);
    }
    55% {
        transform: rotate(-1deg) translate(0, 10px);
    }
    to {
        transform: rotate(2deg) translate(0, 0);
    }
}

.wp-block-ymca-slider.is-style-content-slider::after {
    animation: floating-2 4s ease-in-out infinite;
}
@keyframes floating-2 {
    from {
        transform: rotate(-1deg) translate(0, 0);
    }
    55% {
        transform: rotate(2deg) translate(0, -10px);
    }
    to {
        transform: rotate(-1deg) translate(0, 0);
    }
}

/*Top-left chevron */
.wp-block-ymca-slider.is-style-content-slider::before {
    width: 68px;
    height: 125px;
    bottom: 20px;
    left: 50%;
    z-index: 1;
}

/* Bottom-right chevron */
.wp-block-ymca-slider.is-style-content-slider::after {
    width: 40px;
    height: 80px;
    right: 44%;
    bottom: 100px;
}

@media (max-width: 1200px) {
    .wp-block-ymca-content-slide .ymca-content-slide__grid {
        grid-template-columns: 50% 50%;
    }

    .wp-block-ymca-slider.is-style-content-slider::before {
        left: 48%;
    }
}

@media (max-width: 886px) {
    .wp-block-ymca-content-slide .ymca-content-slide__grid {
        grid-template-columns: 1fr;
    }

    .wp-block-ymca-content-slide .ymca-content-slide__media,
    .wp-block-ymca-content-slide .ymca-content-slide__media img {
        border-radius: unset;
    }
    .ymca-slider:has(.wp-block-ymca-content-slide) {
        --ymca-image-border-radius: 12px 12px 0 0 !important;
    }

    .wp-block-ymca-slider.is-style-content-slider::before {
        width: 42px;
        height: 77px;
        bottom: 52%;
        left: 85%;
    }
    .wp-block-ymca-slider.is-style-content-slider::after {
        width: 28px;
        height: 50px;
        bottom: 61%;
        right: 7%;
    }

    /* .wp-block-ymca-content-slide .ymca-content-slide__media,
  .wp-block-ymca-content-slide .ymca-content-slide__media img {
    border-radius: 12px 12px 0 0;
  } */

    .wp-block-cover:has(.wp-block-ymca-content-slide .ymca-content-slide__grid) {
        padding: 4em;
    }

    .wp-block-ymca-content-slide .ymca-content-slide__body {
        padding: 2rem 35px;
        order: 1;
        /*Order 1 for image first*/
    }
}

@media (max-width: 600px) {
    .wp-block-cover:has(.wp-block-ymca-content-slide .ymca-content-slide__grid) {
        padding: 0 36px;
    }

    .wp-block-ymca-content-slide .ymca-content-slide__body {
        padding: 22px;
    }

    .bmg-split-content-slider .bmg-section-title {
        font-size: 40px !important;
    }

    .bmg-split-content-slider .ymca-slider h2 {
        font-size: 35px;
    }

    .wp-block-ymca-slider.is-style-content-slider::before {
        width: 42px;
        height: 77px;
        bottom: 50%;
        left: 82%;
    }
    .wp-block-ymca-slider.is-style-content-slider::after {
        width: 28px;
        height: 50px;
        bottom: 61%;
        right: 7%;
    }
}

@media (max-width: 500px) {
    .wp-block-ymca-slider.is-style-content-slider::before {
        width: 42px;
        height: 77px;
        bottom: 54%;
        left: 81%;
    }
    .wp-block-ymca-slider.is-style-content-slider::after {
        width: 28px;
        height: 50px;
        bottom: 64%;
        right: 6%;
    }
}

@media (max-width: 400px) {
    .wp-block-ymca-slider.is-style-content-slider::before {
        bottom: 58%;
        left: 81%;
    }
    .wp-block-ymca-slider.is-style-content-slider::after {
        bottom: 68%;
        right: 6%;
    }
}