.cards {
        display: flex;
        gap: 1.5rem;
        padding: 0;
        flex-wrap: wrap;
        li {
            display: flex;
            flex-direction: column;
            Box-shadow: 0 0 .2rem oklch(0 0 0 / .2), 0 0 2rem oklch(0 0 0 / .1);
            border-radius: 0.5rem;
            overflow: hidden;
            margin: 0;
            list-style: none;
            max-width: 25rem;
            border: 0.1rem solid var(--color-dark);
            position: relative;
            transition: 0.5s ease-in-out;
            height: fit-content;
            &:hover{
              transform: translate(-0.5rem, -0.5rem);
            }
            picture {
                order: -1;
                z-index: 1;
                width: 100%;
				max-height: 5rem;
				overflow: hidden;
                img{
                    width: 100%;
					max-height: 5rem;
					overflow: hidden;
                }
            }
        }
        .content {
            padding-inline: 1rem;
            padding-block-end: 1rem;
            position: relative;
            z-index: 1;
            width: 100%;
			height: fit-content;
        }

        a:not(.overlay-link) {
            z-index: 2;
            position: sticky;
        }

    }