@import "../component-not-login-modal/style.css";

.home-catalog{
    overflow: hidden;
    >.container{
        padding-top: 60px;
        padding-bottom: 60px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        align-items: center;
        gap: 0 24px;
        >.content{
            position: relative;
            z-index: 1;
            grid-column: span 7;
            padding-top: 60px;
            padding-bottom: 60px;
            >.bg{
                position: absolute;
                z-index: -1;
                inset: 0 -24px 0 -50vw;
                background-color: var(--color-gray-7);
            }
            >.title{
                display: flex;
                align-items: center;
                gap: 30px;
                margin-bottom: 60px;
                >h2{
                    color: var(--color-primary-1);
                }
                >img{
                    width: 48px;
                }
            }
            >h4{
                max-width: 406px;
                white-space: pre-line;
            }
            >a{
                width: fit-content;
                margin-top: 100px;
                padding: 20px 94px;
                color: white;
                background-color: var(--color-primary-1);
                transition: color .3s;
                &:hover{
                    color: var(--color-secondary-4);
                }
            }
        }
        >.img{
            grid-column: span 5;
            padding-right: 46px;
            padding-bottom: 46px;
            >div{
                position: relative;
                z-index: 1;
                >img{
                    border-radius: 20px;
                }
                >.shadow{
                    position: absolute;
                    z-index: -1;
                    width: 100%;
                    height: 100%;
                    right: -46px;
                    bottom: -46px;
                    border-radius: 20px;
                    background: linear-gradient(180deg, var(--color-secondary-3) 0%, var(--color-secondary-1) 100%);
                }
            }
        }
        >a{
            display: none;
            width: fit-content;
            margin: 60px auto 0;
            padding: 20px 94px;
            color: white;
            background-color: var(--color-primary-1);
            transition: color .3s;
            &:hover{
                color: var(--color-secondary-4);
            }
        }
    }
}

@media screen and (width < 1248px) {
    .home-catalog > .container{
        >.content{
            padding-top: 40px;
            padding-bottom: 40px;
            >.title{
                margin-bottom: 40px;
            }
            >h4{
                max-width: 500px;
            }
            >a{
                margin-top: 60px;
            }
        }
        >.img{
            padding-right: 35px;
            padding-bottom: 35px;
            > div > .shadow{
                right: -35px;
                bottom: -35px;
            }
        }
    }
}
@media screen and (width < 1024px) {
    .home-catalog > .container{
        grid-template-columns: 100%;
        >.content{
            grid-column: auto;
            padding-top: 0;
            padding-bottom: 0;
            margin-bottom: 60px;
            >.bg{
                display: none;
            }
            >h4{
                max-width: none;
            }
            >a{
                display: none;
            }
        }
        >.img{
            grid-column: auto;
            > div{
                max-width: 500px;
                margin: 0 auto;
            }
        }
        >a{
            display: block;
        }
    }
}

@media screen and (width < 768px) {
    .home-catalog > .container{
        >.content > .title > img{
            width: 36px;
        }
    }
}
@media screen and (width < 576px) {
    .home-catalog > .container{
        >.content{
            margin-bottom: 60px;
        }
        >.img{
            max-width: 270px;
            margin: 0 auto;
            padding-right: 26px;
            padding-bottom: 26px;
            > div > .shadow{
                right: -24px;
                bottom: -24px;
            }
        }
        >a{
            padding: 16px 60px;
        }
    }
}