.grid-link {

    width: 100%;
}

.link-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 40px;
    aspect-ratio: 212/127;
}

.link-wrapper .bg-large {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.svg-corner {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 60px;
    width: 60px;
    z-index: 1;
}

.bg-large path,
.bg-large circle {
    transition: fill .3s ease-in-out, stroke .3s ease-in-out;
}

.link-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    z-index: 1;
}

.link-image {
    width: 24px;
    height: 24px;
}

.link-title {
    font-family: var(--wp--preset--font-family--source-serif-4) !important;
    font-size: var(--wp--preset--font-size--callout);
    font-weight: 600;

}

.link-wrapper:hover .bg-large path:last-child {
    fill: var(--wp--preset--color--light);
}

.bg-large path:first-child,
.bg-large circle {
    fill: var(--wp--preset--color--light);
    transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

.link-wrapper:hover .bg-large path:first-child,
.link-wrapper:hover .bg-large circle {
    fill: var(--wp--preset--color--dark-blue);
    stroke: var(--wp--preset--color--dark-blue);
}

.link-wrapper .arrow {
    transform: rotate(0);
    transform-origin: 94% 10%;
    transition: transform 0.3s ease-in-out;
}

.link-wrapper:hover .arrow {
    transform: rotate(36deg);
}

.link-wrapper .link-title,
.link-wrapper .link-text {
    transition: color 0.3s ease-in-out;
}

.link-wrapper .link-text {
    font-family: var(--wp--preset--font-family--montserrat) !important;
    font-size: var(--wp--preset--font-size--p);
    color: var(--wp--preset--color--dark);
    font-weight: 300;
}

.link-wrapper:hover .link-title,
.link-wrapper:hover .link-text {
    color: var(--wp--preset--color--light);
}

@media not all and (min-width: 1281px) {
    .grid-link {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100%;
    }

    .link-wrapper {
        /*max-width: 425px;*/
    }
}

@media not all and (min-width: 1025px) {
    .grid-link {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        width: 100%;
    }
}

@media not all and (min-width: 641px) {}