*,*::before, *::after{
    box-sizing: border-box;
}
:root{
    font-family: "Agency FB",sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
}
body{
    margin: 0;

}
.container{
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1rem;
}
header{
    background-color: oklch(0.288 0.199 264.052);
    color: oklch(1 0 89.876);

    nav{
        ul{
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            list-style: none;
            margin-inline-start: -1rem;
            animation: 1s;
        }
        a{
            display: inline-block;
            padding-block: 2rem;
            padding-inline: 1rem;
            text-decoration: none;
            color: inherit;
        }
        a:hover{
            font-size: 1.5rem;
            font-weight: bold;
        }
    }
}
.cards{
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.card{
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 4px  oklch(0 0 0 / 0.5), 0 0 28px  oklch(0 0 0 / 0.2);
    overflow: hidden;
    border-radius: 1rem;
    > picture, > img{
        order: -1;
    }
}
.card img:hover{
    filter: hue-rotate(270deg) saturate(150%);
    transform: scale(1.05);
    transition: scale .2s ease-in-out ,box-shadow .2s ease-in-out;
    mix-blend-mode: luminosity;
}
.overlay-link{
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
}
.link{
    margin: 1rem;
    > a{
        color: oklch(0.628 0.258 29.234);
        font-weight: bold;
    }
}
.button{
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    display: inline-block;
    background-color: oklch(0.52 0.177 142.495);

    > a{
        text-decoration: none;
        color: oklch(1 0 89.876);
        font-weight: bold;
    }
}
@media(min-width: 40em) {
    .cards{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}