@import '../style';

body {
    font-family: 'avenir', 'sukhumvitset';
    margin: 0;
    padding: 0;
    // background-image: url(../images/banner/br/v1/br-banner.jpg);
}

#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 2fr 1fr;

                        .info-item {
                            .payment-container {
                                .payment-item {
                                    img {

                                        &:nth-child(1),
                                        &:nth-child(2),
                                        &:nth-child(4),
                                        &:nth-child(5) {
                                            width: 2rem;
                                            height: auto;
                                        }

                                        &:nth-child(3) {
                                            width: 3.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 -35.37rem top;
            // 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: #001561;
        // background: linear-gradient(to bottom, #f89f2c 0%, #DF5F05 60%, #9A3104 80%)
    }

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

            .main-grid {
                .main-grid-left {
                    // background-image: url(../images/banner/br/v1/gradient-bg.jpg);
                    // background-repeat: no-repeat;
                    // background-size: cover;

                    .main-header {
                        margin-bottom: 0;


                    }
                }

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

    .bg-wrapper {
        width: 100%;
        // background-image: url(../images/banner/br/v1/gradient-bg.png);
        background-repeat: no-repeat;
    }

    #section-form {
        max-width: 540px;
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 538px) {
    #main {
        .main-container {
            .main-grid {
                .main-grid-left {
                    .main-header {
                        .mobile-container {
                            // margin-bottom: 0;

                            .info-header {
                                bottom: 5%;
                            }
                        }
                    }
                }
            }
        }
    }
}