@import '../style';

html,
body {
    height: 100%;
}

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/id/v1/id-banner.jpeg);

        .main-grid {
            .main-grid-left {
                .main-header {
                    .carousel-wrapper {
                        display: none;
                    }
                }
            }

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

                        .info-item {
                            .payment-container {
                                .payment-item {
                                    img {
                                        filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));

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

                                        &:nth-child(10),
                                        &:nth-child(11) {
                                            width: 2rem;
                                            height: auto;
                                        }


                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

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

.carousel-container {
    margin-top: 6.875rem;
    // border: 5px solid black;

    .carousel-list {
        img {
            width: 100%;
            height: auto;
            border-radius: 1rem;
        }
    }
}

.slick-initialized {
    .slick-slide {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
    #main {
        .main-container {
            // background-position: left -35.37rem top;
            background-image: url(../images/banner/id/v1/id-banner-tablet.jpeg);
        }
    }
}

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

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

@media screen and (max-width: 767px) {
    body {
        background: #f9862d;
        // 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;
                    height: 100%;

                    .main-header {
                        margin-bottom: 0;
                        background-image: url(../images/banner/id/v1/id-banner-mobile.jpeg);
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center;
                        width: 100%;
                        height: 100%;
                        min-height: 120vh;

                        .logo {
                            position: initial;
                            transform: initial;
                            display: flex;
                            justify-content: center;
                            transition: initial;
                            display: flex;
                            justify-content: center;
                            padding-top: 2rem;
                        }

                        .carousel-wrapper {
                            margin-top: -6rem;
                            display: block;
                        }

                        .mobile-container {
                            margin-bottom: 0;

                            .info-header {
                                bottom: 8%;
                            }

                            .carousel-wrapper {
                                // position: absolute;
                                // top:10%;
                            }
                        }
                    }
                }

                .main-grid-right {
                    .carousel-container {
                        display: none;
                    }

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

                            .info-item {
                                .payment-container {
                                    .payment-item {
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: center;
                                        gap: 1rem;
                                        margin: 0 auto;
                                        padding: 0 2rem;
                                        max-width: 100%;
                                        box-sizing: border-box;
                                        align-items: center;

                                        img {
                                            filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .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 {
                        min-height: 100vh;

                        .mobile-container {
                            margin-bottom: 0;

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