main#page {
    margin-top: 100px;
    h1 {
        font-family: 'Nunito';
        text-align: center;
        font-size: 48px;
        color: black;
        font-weight: bolder;
        color: var(--text-primary);
    } p {
        font-size: 20px;
        text-align: center;
        padding: 25px 25px 50px 25px;
        font-family: 'Montserrat';
        color: var(--text-secondary);
    }

    #cards-container {
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
        article {
            color: var(--text-secondary);
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            margin: 9px;
            flex-basis: 300px;
            flex-grow: 1;
            background-color: var(--card-background);
            border: 2px solid var(--border-base);
            border-radius: 10px;
            transition: .25s;
            img {
                padding: 0;
                border-radius: 9px 9px 0 0;
                height: 200px;
                width: 100%;
                object-fit: cover;
                opacity: .85;
                transition: .25s;
                background-color: brown;
                outline: none;
            } h2 {
                font-family: 'Nunito';
                padding: 15px;
                transition: .25s;
            } p {
                padding: 0 15px 15px 15px;
                font-size: 16px;
                text-align: left;
                transition: .25s;
            } #footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 18px;
                padding: 15px;
                p {
                    transition: .25s;
                    font-size: 18px;
                    padding: 0;
                    margin-right: 5px;
                }
                #price-prefix {
                    display: flex;
                    align-items: center;

                    #prefix-0 {
                        background-color: var(--border-focus);
                        color: var(--card-background);
                        padding: 5px 15px;
                        margin-right: 25px;
                        border-radius: 100px;
                    } #prefix-1 {
                        background-color: var(--badge-text);
                        color: var(--badge-background);
                        padding: 5px 15px;
                        margin-right: 25px;
                        border-radius: 100px;
                    } #prefix-2 {
                        background-color: var(--badge-alt-text);
                        color: var(--badge-alt-background);
                        padding: 5px 15px;
                        margin-right: 25px;
                        border-radius: 100px;
                    }

                    #price {
                        font-weight: bold;
                    }
                }
            }
            
        } article:hover {
            border: 2px solid var(--border-focus);
            cursor: pointer;
            color: var(--text-primary);
            transform: translateY(-5px);
            box-shadow: var(--card-shadow) 0px 0px 25px 0px;
            background-color: var(--card-hover);
            h2 {
                color: var(--card-title-hover);
            }
            p {
                color: var(--card-description-hover);
            } img {
                opacity: 1;
            }
            
            #footer {
                #price-prefix {
                    #prefix-0 {
                        background-color: var(--border-focus-angry);
                        color: var(--card-hover);
                    }

                    #prefix-1 {
                        background-color: var(--badge-text-hover);
                        color: var(--badge-background);
                    }

                    #prefix-2 {
                        background-color: var(--badge-alt-text-hover);
                        color: var(--card-hover);
                    }
                }    
            }

        }
    }
}