#ProductClassificationPage {
    background-image: url(../images/world-map.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    background-attachment: fixed;
}

    #ProductClassificationPage .InnerContent {
        max-width: 120em;
        margin: 0 auto;
        padding: 3em 2em;
        box-sizing: border-box;
    }

    #ProductClassificationPage .Title h1 {
        font-size: 2em;
        font-weight: 700;
    }

    #ProductClassificationPage #ProductClassificationWrapper {
        display: flex;
        flex-direction: column;
        gap: 2.5em;
        margin-block-start: 2em;
    }

        #ProductClassificationPage #ProductClassificationWrapper .ProductList {
            display: grid;
            gap: 2.5em;
            width: 100%;
        }

            #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem {
                position: relative;
                width: 100%;
            }

                #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem a {
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    justify-content: center;
                    color: currentColor;
                    position: relative;
                    box-shadow: rgba(255 129 16/10) 0 0 0 1.5px inset;
                    background-color: rgba(255 129 16/10%);
                    border-radius: 1.8em 1.8em 1em 1em;
                    height: 100%;
                }

                    #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem a .ProductImage {
                        background: #fff;
                        box-shadow: rgba(0 0 0 / 5%) 0 0 0 1px;
                        overflow: hidden;
                        position: relative;
                    }

                        #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem a .ProductImage[region="none" i]::before {
                            display: none !important;
                        }

                        #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem a .ProductImage[region]::before {
                            --w: calc(var(--h) * 4 / 3);
                            --h: 1.5em;
                            position: absolute;
                            z-index: 2;
                            top: 0.6em;
                            right: .8em;
                        }

                        #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem a .ProductImage img {
                            vertical-align: middle;
                            width: 100%;
                            height: 100%;
                            aspect-ratio: 1 / 1;
                        }

                    #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem a .ProductTitle {
                        width: 100%;
                        padding: 1em;
                        text-align: center;
                        margin-block: auto;
                        box-sizing: border-box;
                    }


    #ProductClassificationPage .ProductList {
        grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
    }

    #ProductClassificationPage[product-classification="DirectTopUp" i] .ProductList .ProductListItem a .ProductImage {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 1em 1em 2.9em;
    }

    #ProductClassificationPage[product-classification="Card" i] .ProductList .ProductListItem a .ProductImage {
        width: 100%;
        aspect-ratio: 3 / 4;
        border-radius: 1.8em;
    }

@media only screen and (max-width: 900px) {

    #ProductClassificationPage .ProductList {
        grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
        gap: 2em 1.5em !important;
    }

    #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem a .ProductTitle {
        padding-inline: .5em;
    }
}

@media only screen and (max-width: 480px) {

    #ProductClassificationPage #ProductClassificationWrapper {
        gap: 1.5em;
    }

    #ProductClassificationPage .InnerContent {
        padding-inline: 1.5em;
    }

    #ProductClassificationPage .ProductList {
        grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
        gap: 1.5em 1em !important;
    }

    #ProductClassificationPage[product-classification="DirectTopUp" i] #ProductClassificationWrapper .ProductList .ProductListItem a {
        border-radius: 1em 1em .7em .7em;
    }

    #ProductClassificationPage[product-classification="Card" i] #ProductClassificationWrapper .ProductList .ProductListItem a {
        border-radius: 1.8em 1.8em .7em .7em;
    }
}


@media (any-hover) {

    #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem a:focus,
    #ProductClassificationPage #ProductClassificationWrapper .ProductList .ProductListItem a:hover {
        background-color: var(--theme-color);
        color: #fff;
        font-weight: 700;
    }

    .ProductList .ProductListItem a:focus .ProductImage,
    .ProductList .ProductListItem a:hover .ProductImage {
        transition: transform .2s;
        transform: scale(1.02);
    }

        .ProductList .ProductListItem a:focus .ProductImage img,
        .ProductList .ProductListItem a:hover .ProductImage img {
            opacity: 0.8;
        }
}