/* CUSTOM PROMO BG COLOR */
/* .promo.has-gray-background-color{
    background-color: #f7f4eb !important;
} */

div.wp-block-group.is-style-sotp-row-scroll{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    padding:2.2rem 0;
    gap:3rem;
    position:relative;
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
}

div.wp-block-group.is-style-sotp-row-scroll > div {
    scroll-snap-align: center;
    margin-block-start: 0;
}

div.wp-block-group.is-style-sotp-row-scroll > div > h4 {
    width:100%;
    color:#00AEEF;
    margin:1rem 0 0;
}

div.wp-block-group.is-style-sotp-row-scroll > div > h4 a{
    color:#00AEEF;
}

div.wp-block-group.is-style-sotp-row-scroll > div:nth-child(even) > h4,
div.wp-block-group.is-style-sotp-row-scroll > div:nth-child(even) > h4 a{
    color:#95DC61;
}

div.wp-block-group.is-style-sotp-row-scroll > div > h2 {
    font-size: clamp(1.3rem, 0.9286rem + 1.5238vw, 1.5rem);
    margin:.8rem 0 0;
}

div.wp-block-group.is-style-sotp-row-scroll > div > h2 a {
    color:#00AEEF;
}

div.wp-block-group.is-style-sotp-row-scroll > div:nth-child(even) > h2 a {
    color:#95DC61;
}

div.wp-block-group.is-style-sotp-vertical-scroll{
    max-height: 45vh;
    overflow-y: scroll;
    display: block;
}

.cta-newsletter{
    max-width: fit-content !important;
    margin-left: auto;
    margin-right: auto;
    outline-offset: 8px;
    outline: 2px solid #ccc;
}

.cta-newsletter p{
    padding: 24px 32px !important;
    line-height:1.5rem;
}

.cta-newsletter p a{
    text-decoration:none;
}

.cta-newsletter p a::before{
    content: "\2709";
    font-size:170%;
    position: relative;
    top: 4px;
    margin-right: 7px;
    line-height:1rem;
}

.cta-newsletter p a::after{
    content: "\21E8";
    font-size:130%;
    margin-left:7px;
    line-height:1rem;
    position: relative;
    top: 1px;
}

/* Timeline */

.is-style-sotp-timeline{
    max-width:390px !important;
    margin-right:auto;
    margin-left:auto;
}

.is-style-sotp-timeline > *{
    overflow: auto;
    background-color: #ecebeb;
    border-radius: 12px;
    margin:40px 0;
    padding:14px !important;
}

@media screen and (min-width: 600px) {
    div.wp-block-group.is-style-sotp-row-scroll {
        padding-left:0;
        padding-right:0;
        grid-auto-columns: 33%;
    }
    div.wp-block-group.is-style-sotp-row-scroll > div > h2 {
        font-size: clamp(1.2rem, 1.0125rem + 0.5vw, 1.5rem);
    }
    div.wp-block-group.is-style-sotp-row-scroll.arrow::after {
        content: ">";
        display: flex;
        margin: auto;
        height: 100%;
        align-items: center;
        position: sticky;
        right: 0;
        font-size: 5rem;
        color:#fff;
        padding:0 4% 0 5%;
        background-color:rgba(0, 0, 0, 0.7);
    }
    .cta-newsletter p a::before{
        top: 6px;
        margin-right:14px;
    }
    .cta-newsletter p a::after{
        margin-left:14px;
    }
}

@media screen and (min-width: 800px) {
    div.wp-block-group.is-style-sotp-row-scroll {
        grid-auto-columns: 24%;
    }
}

@media screen and (min-width: 720px) {
    .is-style-sotp-wide {
        width:100vw;
        max-width: 900px;
        --wide-group-width: 100vw;
        margin-left: calc((var(--wp--style--global--content-size) - var(--wide-group-width)) / 2);
    }
    .wp-block-post-content > .wp-block-group.alignwide{
        width:100vw;
        max-width: 1200px;
        --sotp-alignwide-width: 100vw;
        margin-left: calc((var(--wp--style--global--content-size) - var(--sotp-alignwide-width)) / 2);
    }
}

@media screen and (min-width: 900px) {
    .is-style-sotp-wide {
        --wide-group-width: 900px;
    }
}

@media screen and (min-width: 1200px) {
    .wp-block-post-content > .wp-block-group.alignwide {
        --sotp-alignwide-width: 1200px;
    }
}

.is-style-sotp-wide > *,
.wp-block-post-content > wp-block-group.alignwide > * {
    max-width:100% !important;
}

@media screen and (min-width: 1000px) {
    div.wp-block-group.is-style-sotp-row-scroll {
        grid-auto-columns: 18%;
    }
}

@media screen and (min-width: 1280px) {
    div.wp-block-group.is-style-sotp-row-scroll {
        padding-right: 0;
        padding-left: 0;
    }
}