/*********************************************
 * Custom Links
**********************************************/
.px-custom-links .flex-grid-template {
    --img-ratio:420/250;
    --grid-gap-x:var(--px-spacing-24);
    --grid-gap-y:var(--px-spacing-24);
}
.px-custom-links.is-5-col .flex-grid-template {
    --img-ratio:3/4;
    --grid-col:5;
    --grid-gap-x:var(--px-spacing-18);
    --grid-gap-y:var(--px-spacing-40);
}

.px-custom-links__image img {aspect-ratio:var(--img-ratio);}
a:hover .px-custom-links__title {color:var(--px-color-primary);}
.is-brand-primary a:hover .px-custom-links__title {color:var(--px-color-black);}


/*********************************************
 * Custom Links Responsive
**********************************************/
@media only screen and (max-width:1280px) {
    .px-custom-links {--grid-gap-x:var(--px-gap-container);}
}

@media only screen and (max-width:1023px) {
    .px-custom-links.is-5-col .flex-grid-template {
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        white-space:nowrap;
        margin:0 calc(-1 * var(--px-gap-container));
        padding:0 var(--px-gap-container);

        /* scroll snap */
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .px-custom-links.is-5-col .flex-grid-template > div {
        min-width:200px; width:200px;
        display:inline-block;

        /* snap center */
        scroll-snap-align:center;
        scroll-snap-stop:always;
    }
}

@media only screen and (max-width:767px) {
    .px-custom-links.is-5-col .flex-grid-template {

    }
}