@import '../style';

#main {
    .main-container {
        background-image: url(../images/banner/kh/v2/kh-banner.jpg);

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

                        .info-item {
                            .payment-container {
                                .payment-item {
                                    img {
                                        &:nth-child(3) {
                                            height: 1.3rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.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 -18.37rem top;
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #main {
        .main-container {
            background-image: url(../images/banner/kh/v2/kh-banner-tablet.jpg);
            // background-position: left -2.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: #001561;
    }

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

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