.arb-grid {
    display: grid;
    gap: 32px;
    margin: 0 auto;
}

.arb-grid-heading.center-desktop {
    text-align: center;
}

.arb-grid[data-cols-viewport-xl="1"] {
    grid-template-columns: repeat(1, 1fr);
}

.arb-grid[data-cols-viewport-xl="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.arb-grid[data-cols-viewport-xl="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.arb-grid[data-cols-viewport-xl="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.arb-grid[data-cols-viewport-xl="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.arb-grid[data-cols-viewport-xl="6"] {
    grid-template-columns: repeat(6, 1fr);
}

.arb-grid[data-cols-viewport-xl="7"] {
    grid-template-columns: repeat(7, 1fr);
}

.arb-grid[data-cols-viewport-xl="8"] {
    grid-template-columns: repeat(8, 1fr);
}

.arb-grid[data-cols-viewport-xl="9"] {
    grid-template-columns: repeat(9, 1fr);
}

.arb-grid[data-cols-viewport-xl="10"] {
    grid-template-columns: repeat(10, 1fr);
}

.arb-grid[data-cols-viewport-xl="11"] {
    grid-template-columns: repeat(11, 1fr);
}

.arb-grid[data-cols-viewport-xl="12"] {
    grid-template-columns: repeat(12, 1fr);
}


/* ... continue for as many columns as you might expect for desktop */





@media (min-width: 768px) and (max-width: 1151px) {

    .arb-grid {
        gap: 24px;
    }
}


@media (max-width: 767px) {

    .arb-grid {
        gap: 16px;
    }
}


/* TABLET */


@media (min-width: 768px) and (max-width: 959px) {

    .arb-grid[data-cols-viewport-l="1"] {
        grid-template-columns: repeat(1, 1fr);
    }

    .arb-grid[data-cols-viewport-l="2"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .arb-grid[data-cols-viewport-l="3"] {
        grid-template-columns: repeat(3, 1fr);
    }

    .arb-grid[data-cols-viewport-l="4"] {
        grid-template-columns: repeat(4, 1fr);
    }

    .arb-grid[data-cols-viewport-l="5"] {
        grid-template-columns: repeat(5, 1fr);
    }

    .arb-grid[data-cols-viewport-l="6"] {
        grid-template-columns: repeat(6, 1fr);
    }

    /* ... continue for as many columns as you might expect for tablet */
}

/* MOBILE */


@media (min-width: 576px) and (max-width: 767px) {
    .arb-grid[data-cols-viewport-m="1"] {
        grid-template-columns: repeat(1, 1fr);
    }

    .arb-grid[data-cols-viewport-m="2"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .arb-grid[data-cols-viewport-m="3"] {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ... continue for as many columns as you might expect for mobile */
    .arb-grid-heading.center-mobile {
        text-align: center;
    }
}

@media (max-width: 575px) {
    .arb-grid[data-cols-viewport-s="1"] {
        grid-template-columns: repeat(1, 1fr);
    }

    .arb-grid[data-cols-viewport-s="2"] {
        grid-template-columns: repeat(2, 1fr);
    }

    .arb-grid[data-cols-viewport-s="3"] {
        grid-template-columns: repeat(3, 1fr);
    }

    /* ... continue for as many columns as you might expect for mobile */
    .arb-grid-heading.center-mobile {
        text-align: center;
    }
}

.arb-block {
    display: flex;
    position: relative;
}

.arb-block h2 {
   
    font-size: 1.2rem;
    line-height: 1.5rem;
    padding-top:0rem;
    padding-bottom: 0rem;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
        "Helvetica Neue", sans-serif;
    font-weight: 500;
}

.arb-block h3 {
    line-height: 1.5rem;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
        "Helvetica Neue", sans-serif;
    font-weight: 500;
}

.arb-block h1.stylised {
        color: #fff !important;
        font-size: 2.4rem;
        line-height: 3rem;
        font-weight: 500;
        text-shadow: 2px 2px 0 rgb(0 0 0 / 70%);
        font-family: "Montserrat", sans-serif;   
}



.arb-block-img {
    display: block !important;
    max-width: 100%;
    /* Makes the image responsive */
    width: 100%;
    /*height: auto !important;*/
    margin: 0 auto;
}

.arb-text-and-button-container-row {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.arb-text-and-button-container-row> :last-child {
    /*margin-top: auto !important;*/
    margin-bottom: 0;
    padding-bottom: 0;
}

.arb-text-and-button-container-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.arb-text-and-button-container-column> :last-child {
    margin-top: auto !important;
    margin-bottom: 0;
    /*padding-bottom: 0;*/
}


.arb-text1-container p {
    padding-bottom: 0rem;
    font-size: 0.9rem;
    line-height: 1.5rem !important; /* This is important can be removed after full switchover to new theme */
    /*margin: 0 !important;*/
    font-weight: 400;
    color: var(--wp--preset--color--contrast)
}

.arb-text1-container p.small {
    font-size: 0.8rem;
}
.arb-text1-container p.medium {
    font-size: 0.9rem ;
}
.arb-text1-container p.large {
    font-size: 1.2rem;
}

.arb-text2-container p {
    padding-bottom: 0rem;
    font-size: 0.9rem;
    line-height: 1.5rem !important; /* This is important can be removed after full switchover to new theme */
    margin: 0 !important;
    font-weight: 400;
    color: var(--wp--preset--color--contrast)
}

.arb-text2-container p.small {
    font-size: 0.8rem;
}
.aarb-text2-container p.medium {
    font-size: 0.9rem ;
}
.arb-text2-container p.large {
    font-size: 1.2rem;
}


.arb-reviews-stars {
    width: 105px;
    height:32px;
    margin-left: -2px;
}

.button-text_link {
    line-height: 1.5rem;
    font-size: 1rem;
}

.button-primary_pink {
    font-size: 0.9375rem;
    border-radius: 4px;
    line-height: 1.25rem;
    padding: 0.375rem;
    max-width: 352px;
    width: 100%;
    margin: 0 auto;
    background-color: #d80080;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.4s;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, Segoe, "Segoe UI",
        "Droid Sans", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
        Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

@media (max-width: 767px) {

    .button-primary_pink {
        max-width: 100%;
    }
}

.button-primary_pink:hover {
    background-color: #a50062;
}
.button-primary_pink:active {
    background-color: #80004C;
}



.button-border {
    border: 1.5px solid #FFF;
}

.button-medium {
    font-size: 1rem;
    line-height: 2.5rem;
    line-height: 1.25rem;
    padding: 0.625rem;
}

.button-medium-large {
    line-height: 1.75rem !important;
    font-size: 1.25rem !important;;
    height: 3rem;
    border-radius: 8px !important;;
    max-width: none;
}

.button-large {
    line-height: 1.75rem !important;
    font-size: 1.25rem !important;;
    height: 4rem;
    border-radius: 8px !important;;
    box-shadow: rgba(0, 0, 0, .1) 0 1px 3px 0, rgba(0, 0, 0, .06) 0 1px 2px 0;
}

.button-white {
    font-size: 1rem;
    border-radius: 4px;
    line-height: 1.25rem;
    padding: 0.375rem;
    max-width: 352px;
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    border: 0.125rem solid #d80080;
    color: #d80080;
    text-align: center;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.4s;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, Segoe, "Segoe UI",
        "Droid Sans", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
        Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.button-1-col {
    /*max-width: 369px;*/
}
.button-2-col {
    max-width: 710px;
}
.button-3-col {
    max-width: 1080px;
}
.button-50-percent {
    max-width: 50%;
}
.button-100-percent {
    max-width: 100%;
}
