/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/

*/@layer components{.c-flip{position:relative}.c-flip a{display:inline-block}.c-flip__back{left:0;opacity:0;position:absolute;top:0;transform:rotateY(-180deg)}.c-flip__content a,.c-flip__content p:first-child{padding-block-end:var(--spacing-s-0)}.c-flip__content a{padding-block-start:var(--spacing-s)}.c-flip:not(.js--flipped):after{border-bottom:var(--triangle-border) solid var(--colour-black);border-left:var(--triangle-border) solid hsla(var(--colour-black-hue),100%,.25);bottom:-2px;content:"";position:absolute;right:-2px;z-index:1}.c-flip__back,.c-flip__front{transition-duration:.5s;transition-property:transform,opacity;transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}.c-flip__front{transform:rotateY(0deg)}.js--flipped .c-flip__back,.no-js .c-flip:hover .c-flip__back{opacity:1;transform:rotateY(0deg)}.js--flipped .c-flip__front,.no-js .c-flip:hover .c-flip__front{transform:rotateY(180deg)}.c-flip__content{background:radial-gradient(ellipse at top right,hsl(var(--colour-black-hue),16%) 0,transparent 100%);border-radius:30% 70% 70% 30%/30% 38% 62% 70%;padding-block-start:var(--spacing-s);text-align:left}.c-flip__content .c-grid-title-sub svg{font-size:var(--icon-size-m);margin-inline-start:var(--spacing-icon-l)}.js--flipped .c-flip__front,.no-js .c-flip:hover .c-flip__front{opacity:0}.js--flipped:before,.no-js .c-flip:hover:before{content:normal}.c-flip:hover,.js--flipped{border:none}.js--flipped.c-filter-bw-with-hue:hover,.no-js .c-flip.c-filter-bw-with-hue:hover{box-shadow:none}}