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

#DirectTopUpPage #DirectTopUpWrapper,
#GiftCardPage #GiftCardWrapper {
    display: flex;
    flex-direction: column;
    gap: 4.5em;
}

#DirectTopUpWrapper .Title,
#GiftCardWrapper .Title {
    display: flex;
    gap: .5em;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    #DirectTopUpWrapper .Title:after,
    #GiftCardWrapper .Title:after {
        content: '';
        display: block;
        height: 4px;
        background-color: var(--theme-color-light);
        width: 8em;
        border-radius: 0 0 2em 2em;
    }

    #DirectTopUpWrapper .Title h1,
    #GiftCardWrapper .Title h1 {
        font-weight: 700;
        font-size: 3em;
    }

.ProductList {
    display: grid;
    gap: 2.5em;
}

    .ProductList .ProductListItem {
        position: relative;
    }

        .ProductList .ProductListItem a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .6em;
            color: currentColor;
            position: relative;
        }

            .ProductList .ProductListItem a .ProductImage {
                background: rgba(255 255 255 / 5%);
                overflow: hidden;
                position: relative;
            }

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

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

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

            .ProductList .ProductListItem a .ProductTitle {
                word-break: break-word;
                max-height: 3em;
                overflow: hidden;
                font-weight: 700;
                text-align: center;
                color: rgba(255, 255, 255, 0.8);
                line-height: 1.5;
            }


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

    #GiftCardPage .ProductList .ProductListItem a .ProductImage {
        width: 16.6em;
        height: 22.3em;
        border-radius: 1.5em;
        position: relative;
    }

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

    #DirectTopUpPage .ProductList .ProductListItem a .ProductImage {
        width: 16.5em;
        height: 16.5em;
        border-radius: 1em;
    }

@media (any-hover) {
    .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;
        }

    .ProductList .ProductListItem a:focus .ProductTitle,
    .ProductList .ProductListItem a:hover .ProductTitle {
        color: #fff;
    }
}