:root {
    --pink: hsl(332, 74%, 45%);
    --pink-bright: hsl(324, 100%, 46%);
    --pink-lighter: #de237b;
    --purple: hsl(317, 100%, 26%);
    --blue-dark: hsl(205, 100%, 32%);
    --blue: hsl(192, 100%, 40%);
    --grey-dark: hsl(210, 4%, 30%);
    --grey: hsl(200, 4%, 42%);
    --grey-light: hsl(180, 3%, 88%);
    --grey-lightest: hsl(195, 29%, 95%);
    --blue-grey: hsl(195, 29%, 97%);

    --info: hsl(195, 85%, 90%);
    --info-dark: hsl(205, 100%, 32%);
    --warning: hsl(51, 100%, 80%);
    --warning-dark: hsl(14, 84%, 35%);
    --success: hsl(74, 62%, 84%);
    --success-dark: hsl(94, 78%, 20%);
    --error: hsl(0, 100%, 93%);
    --error-dark: hsl(0, 85%, 43%);

    --a11y: hsl(332, 74%, 45%);

    --a11y: var(--pink);

    --width: 1140px;

    /* stylelint-disable */
    --body: 'Helvetica Neue', 'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif;
    --title: 'Plusnet Creighton', 'PlusnetCreighton', 'Helvetica Neue', 'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif;
    /* stylelint-enable */
}
.pn-mob-banner {
    display: -ms-grid;
    display: grid;
    margin: auto;
}
.pn-mob-banner__title {
    margin: 0;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Plusnet Creighton', 'PlusnetCreighton', 'Helvetica Neue', 'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif;
    font-family: var(--title);
    color: hsl(317, 100%, 26%);
    color: var(--purple);
}
.pn-mob-banner__mobile-img {
    height: auto;
}
.pn-mob-banner__uswitch-icon {
    height: auto;
}
.pn-mob-banner__info {
    font-family: 'Plusnet Creighton', 'PlusnetCreighton', 'Helvetica Neue', 'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif;
    font-family: var(--title);
    color: hsl(317, 100%, 26%);
    color: var(--purple);
    font-weight: normal;
    margin: 0;
}
.pn-mob-banner__button:hover {
    color: #fff;
}
.u-button {
    font-family: 'Plusnet Creighton', 'PlusnetCreighton', 'Helvetica Neue', 'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', sans-serif;
    font-family: var(--title);
    border-radius: 4px;
    border: 0;
    line-height: 1;
    cursor: pointer
}
.u-button[disabled],
    .u-button.is_disabled,
    .u-button[disabled]:hover,
    .u-button.is_disabled:hover,
    .u-button[disabled]:focus,
    .u-button.is_disabled:focus {
    cursor: default;
}
.u-button:focus {
    outline: 0;
}
.u-button--primary {
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
    transition:
        .25s box-shadow var(--bezier),
        .25s border var(--bezier),
        .25s background-color var(--bezier),
        .25s color var(--bezier);
    color: #fff
}
.u-button--primary:hover {
    box-shadow:
            0 0 8px 0 var(--shadow),
            0 8px 8px 0 var(--shadow-light);
}
.u-button--primary:focus {
    box-shadow:
            0 0 0 1px #fff,
            0 0 0 3px var(--shadow);
}
.u-button--cta.u-button--primary {
    background-color: hsl(332, 74%, 45%);
    background-color: var(--pink)
}
.u-button--cta.u-button--primary:hover {
    background-color: #de237b;
    background-color: var(--pink-lighter);
}
.u-button--cta.u-button--primary:active {
    background-color: var(--pink-darker);
}
.u-button--primary[disabled],
    .u-button--primary.is_disabled,
    .u-button--primary[disabled]:hover,
    .u-button--primary.is_disabled:hover,
    .u-button--primary[disabled]:focus,
    .u-button--primary.is_disabled:focus {
    background-color: var(--black-16);
    color: var(--black-38);
    box-shadow: none;
}
.u-button--primary.u-button--start {
    padding-left: 36px;
    padding-right: 36px
}
.u-button--primary.u-button--start::after {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 12px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: rotate(45deg) translate(-3px, 0);
            transform: rotate(45deg) translate(-3px, 0);
    content: '';
    border-top-color: #fff;
    border-right-color: #fff;
}
/* @import 'your/_partial'; */
@media (min-width: 1025px) {
    .pn-mob-banner {
        -ms-grid-rows: (33%)[2] 20%;
            grid-template-rows: repeat(2, 33%) 20%;
        -ms-grid-columns: 50% (25%)[2];
            grid-template-columns: 50% repeat(2, 25%);
        width: 1025px;
        height: 470px;
        padding: 48px 0;
    }
    .pn-mob-banner__title {
        -ms-grid-row: 1;
            grid-row-start: 1;
        -ms-grid-row-span: 3;
        grid-row-end: 4;
        -ms-grid-column: 1;
            grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-column-align: center;
            justify-self: center;
        -ms-grid-row-align: center;
            align-self: center;
        max-width: 495px;
        padding-top: 54px;
        font-size: 72px;
        line-height: 72px;
    }
    .pn-mob-banner__mobile-img {
        -ms-grid-row: 1;
            grid-row-start: 1;
        -ms-grid-row-span: 3;
        grid-row-end: 4;
        -ms-grid-column: 2;
            grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        width: 212px;
        height: 391px;
    }
    .pn-mob-banner__uswitch-icon {
        -ms-grid-row: 1;
            grid-row-start: 1;
        -ms-grid-row-span: 1;
        grid-row-end: 2;
        -ms-grid-column: 3;
            grid-column-start: 3;
        -ms-grid-column-span: 1;
        grid-column-end: 4;
        -ms-grid-row-align: center;
            align-self: center;
        width: 156px;
        height: 61px;
    }
    .pn-mob-banner__info {
        -ms-grid-row: 2;
            grid-row-start: 2;
        -ms-grid-row-span: 1;
        grid-row-end: 3;
        -ms-grid-column: 3;
            grid-column-start: 3;
        -ms-grid-column-span: 1;
        grid-column-end: 4;
        -ms-grid-row-align: start;
            align-self: start;
        max-width: 185px;
        font-size: 27px;
        line-height: 31px;
    }
    .pn-mob-banner__button-contain {
        -ms-grid-row: 3;
            grid-row-start: 3;
        -ms-grid-row-span: 1;
        grid-row-end: 4;
        -ms-grid-column: 3;
            grid-column-start: 3;
        -ms-grid-column-span: 1;
        grid-column-end: 4;
        -ms-grid-row-align: end;
            align-self: end;
        padding-bottom: 18px;
    }
    .u-button--primary {
        font-size: 24px;
        padding: 10px 30px;
    }
}
@media (min-width: 801px) and (max-width: 1024px) {
    .pn-mob-banner {
        -ms-grid-rows: 50% 10% 30%;
            grid-template-rows: 50% 10% 30%;
        -ms-grid-columns: 40% (30%)[2];
            grid-template-columns: 40% repeat(2, 30%);
        width: 768px;
        height: 416px;
        padding-top: 36px;
    }
    .pn-mob-banner__title {
        -ms-grid-row: 1;
            grid-row-start: 1;
        -ms-grid-row-span: 1;
        grid-row-end: 2;
        -ms-grid-column: 1;
            grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-row-align: end;
            align-self: end;
        max-width: 306px;
        font-size: 48px;
        line-height: 48px;
    }
    .pn-mob-banner__mobile-img {
        -ms-grid-row: 1;
            grid-row-start: 1;
        -ms-grid-row-span: 3;
        grid-row-end: 4;
        -ms-grid-column: 2;
            grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row-align: center;
        -ms-grid-column-align: center;
        place-self: center;
        width: 159px;
        height: 293px;
    }
    .pn-mob-banner__uswitch-icon {
        -ms-grid-row: 3;
            grid-row-start: 3;
        -ms-grid-row-span: 1;
        grid-row-end: 4;
        -ms-grid-column: 1;
            grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        width: 129px;
        height: 51px;
    }
    .pn-mob-banner__info {
        -ms-grid-row: 1;
            grid-row-start: 1;
        -ms-grid-row-span: 1;
        grid-row-end: 2;
        -ms-grid-column: 3;
            grid-column-start: 3;
        -ms-grid-column-span: 1;
        grid-column-end: 4;
        -ms-grid-row-align: end;
            align-self: end;
        font-size: 28px;
        line-height: 34px;
    }
    .pn-mob-banner__button-contain {
        -ms-grid-row: 3;
            grid-row-start: 3;
        -ms-grid-row-span: 1;
        grid-row-end: 4;
        -ms-grid-column: 3;
            grid-column-start: 3;
        -ms-grid-column-span: 1;
        grid-column-end: 4;
        -ms-grid-row-align: start;
        -ms-grid-column-align: start;
        place-self: start;
        padding-top: 18px;
    }
}
@media (max-width: 800px) {
    .pn-mob-banner {
        -ms-grid-rows: 35%  10% 30% 15%;
            grid-template-rows: 35%  10% 30% 15%;
        -ms-grid-columns: 60% 50%;
            grid-template-columns: 60% 50%;
        width: 273px;
        height: 602px;
        padding: 26px 0;
    }
    .pn-mob-banner__title {
        -ms-grid-row: 1;
            grid-row-start: 1;
        -ms-grid-row-span: 1;
        grid-row-end: 2;
        -ms-grid-column: 1;
            grid-column-start: 1;
        -ms-grid-column-span: 2;
        grid-column-end: 3;
        -ms-grid-row-align: center;
        -ms-grid-column-align: center;
        place-self: center;
        max-width: 273px;
        font-size: 40px;
        line-height: 40px;
    }
    .pn-mob-banner__mobile-img {
        -ms-grid-row: 2;
            grid-row-start: 2;
        -ms-grid-row-span: 2;
        grid-row-end: 4;
        -ms-grid-column: 1;
            grid-column-start: 1;
        -ms-grid-column-span: 1;
        grid-column-end: 2;
        -ms-grid-column-align: center;
            justify-self: center;
        width: 133px;
        height: 246px;
    }
    .pn-mob-banner__uswitch-icon {
        -ms-grid-row: 2;
            grid-row-start: 2;
        -ms-grid-row-span: 1;
        grid-row-end: 3;
        -ms-grid-column: 2;
            grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        width: 120px;
        height: 47px;
    }
    .pn-mob-banner__info {
        -ms-grid-row: 3;
            grid-row-start: 3;
        -ms-grid-row-span: 1;
        grid-row-end: 4;
        -ms-grid-column: 2;
            grid-column-start: 2;
        -ms-grid-column-span: 1;
        grid-column-end: 3;
        -ms-grid-row-align: start;
        -ms-grid-column-align: start;
        place-self: start;
        max-width: 120px;
        padding-top: 24px;
        font-size: 20px;
        line-height: 24px;
    }
    .pn-mob-banner__button-contain {
        -ms-grid-row: 4;
            grid-row-start: 4;
        -ms-grid-row-span: 1;
        grid-row-end: 5;
        -ms-grid-column: 1;
            grid-column-start: 1;
        -ms-grid-column-span: 2;
        grid-column-end: 3;
        -ms-grid-column-align: center;
            justify-self: center;
        -ms-grid-row-align: end;
            align-self: end;
        padding-top: 12px;
    }
}
@media (max-width: 1024px) {
    .u-button--primary {
        font-size: 20px;
        padding: 6px 16px;
    }
}