div.container.cards {
    margin-top: -36px;
    margin-bottom: 72px;
    display: flex;
    gap: 18px;
    justify-content: space-evenly;
    flex-wrap: wrap;

    article {
        min-width: 300px;
        max-width: 350px;
        aspect-ratio: 16/10;
        text-align: center;

        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;

        div.background {
            height: 100%;
            width: 100%;
            
            background-image: var(--backgroundImage);
            background-size: cover;
            background-position: center center;
            box-shadow: var(--layoutShadow);
            border-radius: 6px;
        }

        h2 {
            margin-top: 18px;
        }

        p, a {
            margin-top: 9px;
        }
    }
}

div.container.highlights {
    display: flex;
    gap: 18px;
    justify-content: space-evenly;
    flex-wrap: wrap;

    article {
        max-width: 325px;
        width: 100%;
        display: flex;
        flex-direction: column;

        img {
            width: 80%;
            display: block;
            margin: 0 auto;
            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.2));
        }
            
        .title {
            font-size: 1.6rem;
            font-family: 'Inter Black';
            text-align: center;
            margin: 18px 0;
        }

        div.content {    
            border: var(--colourBorder);
            background-color: white;
            box-shadow: var(--layoutShadow);
            border-radius: 4px;
            padding: 18px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: stretch;

            .subtitle {
                font-family: 'Inter Black';
                text-align: center;
            }

            .copy {
                margin-top: 18px;
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                p {
                    margin-top: 9px;
                }
            }
        }
    }
}