All of the Parish Quicklink classes are built with the use of variables. This means that any changes you want to make to the particle can be done easily with a short line of CSS.

These are the default variables for all Quicklinks:

    --ql-num-boxes: 4; /*USE FIRST ROW TO COUNT IF MORE THAN ONE ROW*/
    --ql-flex: calc(100% / var(--ql-num-boxes));
    --ql-bg-opacity: .6;
    --ql-bg-hover-opacity: .8;
    --ql-background-color: rgba(var(--primary-rgb),var(--ql-bg-opacity));
    --ql-background-hover: rgba(var(--primary-rgb),var(--ql-bg-hover-opacity));
    --ql-background-size-desktop: calc(var(--ql-icon-size-desktop) + 2vw);
    --ql-background-size-mobile: calc(var(--ql-icon-size-mobile) + 3rem);
    --ql-font-family: var(--title-font-family);
    --ql-title-color: var(--primary-color);
    --ql-title-hover: var(--secondary-color);
    --ql-mobile-bg-color: rgba(var(--primary-rgb),.5);
    --ql-mobile-bg-hover: rgba(var(--primary-rgb),.7);
    --ql-mobile-title-color: var(--default-white);
    --ql-box-shadow: var(--default-box-shadow);
    --ql-font-size-desktop: 1.7vw;
    --ql-font-size-mobile: 1.2rem;
    --ql-bottom-border-size: 2px;
    --ql-bottom-border-style: solid;
    --ql-bottom-border-color: var(--default-white);
    --ql-right-border-size: 1px;
    --ql-right-border-style: solid;
    --ql-right-border-color: var(--secondary-color);
    --ql-top-border-size: 5px;
    --ql-top-border-style: solid;
    --ql-top-border-color: var(--secondary-color);
    --ql-left-border-size: 1px;
    --ql-left-border-style: solid;
    --ql-left-border-color: var(--secondary-color);
    --ql-border-radius: 0;
    --ql-icon-size-desktop: 4vw;
    --ql-icon-size-mobile: 4rem;
    --ql-title-color-mobile: var(--primary-color);
    --ql-letter-spacing: 0;
    --ql-text-transform: none;
    --ql-height: 14vw;
    --ql-subtitle-color: var(--secondary-color);

NOTE: If there is more than one Quicklinks particle used on a site you must use the class name to set variables per particle.