main{
    section{
        max-width: 100rem;
        display: flex;
        flex-direction: row;
        margin-top: 8rem;
        justify-content: space-between;
        margin-bottom: 7rem;
        flex-wrap: wrap;
        div{
            max-width: 30rem;
            img{
                max-width: 100%;
            }
        }
        div{
            h2{
                font-family: "Great Vibes", cursive;
                color: var(--primary);
                font-size: 4rem;
                border-bottom: 0.1rem solid lightgrey;
            }
            p{
                font-family: "Great Vibes", cursive;
                color: var(--primary);
                font-size: 1.2rem;
            }
        }
    }
    .cards {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;

        section{
            position: relative;
            margin: 1rem 0.2rem;
            border: 0.1rem solid;
            display: flex;
            flex-direction: column;
            padding: 1rem;
            border-radius: 1rem;
            max-width: 18rem;
            max-height: 22rem;
            height: 22rem;
            a{
                text-decoration: none;
            }
            &:hover{
                box-shadow: 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.3);
                transform: translateY(-0.1rem) translateX(-0.1rem) translateZ(0);
                transition: 0.2s;
            }
            .card-link{
                position: absolute;
                inset: 0;
                z-index: 1;
            }
        }
    }
}
@media (max-width: 40rem) {
    main .cards {
        justify-content: center;
    }
    section{
        justify-content: center;
        align-items: center;
    }
}