@import '../style';

body {
    font-family: 'avenir', 'sukhumvitset';
}

#main {
    .main-container {
        background-image: url(../images/banner/vn/v1/vn-banner.jpg);
        // background-position: left -10.37rem top;

        .main-grid {
            .main-grid-right {
                .info-wrapper {
                    .info-container {
                        grid-template-columns: 1fr 2fr 1fr;

                        .info-item {
                            .payment-container {
                                .payment-item {
                                    img {
                                        &:nth-child(8),
                                        &:nth-child(9),
                                        &:nth-child(10),
                                        &:nth-child(11) {
                                            width: 2.5rem;
                                            height: auto;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.main-gradient {
    background: linear-gradient(0deg, #6c6c6c 0%, rgba(12, 10, 13, 0) 95.75%);
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
    #main {
        .main-container {
            // background-position: left -25.37rem top;
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #main {
        .main-container {
            background-image: url(../images/banner/vn/v1/vn-banner-tablet.jpg);
            // background-position: left -23.37rem top;

            .main-grid {
                .main-grid-right {
                    .info-wrapper {
                        .info-container {
                            grid-template-columns: 1fr 1fr;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {
    body {
        background-color: #1C0704;
    }

    #main {
        .main-container {
            background-image: initial;

            .main-grid {
                .main-grid-right {
                    .info-wrapper {
                        .info-container {
                            grid-template-columns: initial;
                            gap: 2rem;
                        }
                    }
                }
            }
        }
    }
}