.ministries-grid {
    --gap: 8px;
    --base: clamp(2rem, 8cqi, 80px);
    --items: 9;
    --easing: linear(
      0 0%,
      0.1538 4.09%,
      0.2926 8.29%,
      0.4173 12.63%,
      0.5282 17.12%,
      0.6255 21.77%,
      0.7099 26.61%,
      0.782 31.67%,
      0.8425 37%,
      0.8887 42.23%,
      0.9257 47.79%,
      0.9543 53.78%,
      0.9752 60.32%,
      0.9883 67.11%,
      0.9961 75%,
      1 100%
    );
    --speed: 0.6s;
}

ul.ministries-grid {
	display: grid;
    gap: var(--gap);
    list-style-type: none;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
    height: auto;
    width: 100%;
	transition-duration: var(--speed);
	transition-timing-function: var(--easing);
	
	grid-template-rows: 6fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 6fr repeat(calc(var(--items) - 1), 1fr);
	grid-template-columns: 1fr;
	transition-property: grid-template-rows;
	font-size: 14px;

	@media (min-width: 768px) {
		grid-template-rows: 4fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 4fr repeat(calc(var(--items) - 1), 1fr);
		font-size: 1rem;
	}
	@media (min-width: 1025px) {
		grid-template-columns: 10fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-columns: 10fr repeat(calc(var(--items) - 1), 1fr);
		grid-template-rows: 1fr;
		transition-property: grid-template-columns;
		height: clamp(300px, 40dvh, 474px);
	}

    > li {
        background: light-dark(#fff, #000);
	    position: relative;
	    overflow: hidden;
		min-height: var(--base);
	    border-radius: 8px;
	    border: 1px solid color-mix(in hsl, canvas, canvasText 50%);

		@media (min-width: 1025px) {
			min-width: var(--base);
			min-height: unset;
		}

	:is(svg, h3) {
            opacity: 0.6;
            transition: opacity calc(var(--speed) * 1.2) var(--easing);
        }

	:is(a, p) {
	    opacity: 0;
	    transition: opacity calc(var(--speed) * 1.2) var(--easing);
	    width: fit-content;
	}

	img {
	    filter: grayscale(1) brightness(1.5);
	    scale: 1.1;
	    transition-property: filter, scale;
            transition-duration: calc(var(--speed) * 1.2);
            transition-timing-function: var(--easing);
	}
    }

    [data-active='true'] :is(a, p, h3, svg) {
        opacity: var(--opacity, 1);
    }
    [data-active='true'] :is(a, p) {
        transition-delay: calc(var(--speed) * 0.25);
    }

    [data-active='true'] img {
        filter: grayscale(0) brightness(1);
        scale: 1;
        transition-delay: calc(var(--speed) * 0.25);
    }

    article {
        height: 100%;
        width: 100%;
        position: absolute;
        font-family: var(--e-global-typography-accent-font-family, 'Merriweather');
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 1rem;
        padding-inline: 1rem;
        padding-bottom: 1rem;
        overflow: hidden;
        

		@media (min-width: 1025px) {
			width: calc(var(--article-width) * 1px);
			padding-inline: calc(var(--base) * 0.5 - 9px);
		}
    }

    h3 {
        white-space: nowrap;
	    margin: 0;
	    position: absolute;
	    top: calc(var(--base) * 0.15);
	    left: 1rem;
        font-size: 1rem;
        font-weight: var(--e-global-typography-primary-font-weight, 400);
        text-transform: uppercase;
        font-family: var(--e-global-typography-primary-font-family, monospace);
	    letter-spacing: 1px;

		@media (min-width: 768px) {
			top: calc(var(--base) * 0.3);
		}

		@media (min-width: 1025px) {
			top: 1rem;
			left: calc(var(--base) * 0.5);
			transform-origin: 0 50%;
            rotate: 90deg;
		}
    }

    p {
        text-wrap: balance;
        --opacity: 1;
	    margin-bottom: 1.4rem;
		z-index: 9;
    }

    a {
        position: absolute;
        bottom: 1rem;
        height: 18px;
        line-height: 1;
        color: var(--e-global-color-primary, inherit);

        &:is(:focus-visible, :hover) {
            outline: none;
            span {
                text-decoration: underline;
                text-underline-offset: 4px;
            }
        }

        span {
            display: inline-block;
            line-height: 18px;
            /* translate: calc(var(--base) * 0.5); */
            font-weight: 500;
        }
    }

    img {
        position: absolute;
        pointer-events: none;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mask: radial-gradient(100% 85% at 100% 50%, #fff8, #fff0);

		@media (min-width: 1025px) {
			mask: radial-gradient(100% 85% at 100% 0, #fff, #0000);
		}
    }
}