.collection {
    margin-bottom: 80px;
    padding-bottom: 80px;
    border-bottom: 1px solid rgba($black, 0.15);

    .wrapper {
        .col-1 {
            padding: 0 20px;
            margin-bottom: 40px;

            .common-heading {
                font-family: $raleway;
                text-align: center;
                color: $brown;
                font-weight: 700;
                font-size: 32px;
                line-height: 100%;
                letter-spacing: 0%;
                margin-bottom: 15px;

                // Present only when the optional Heading Link field is set;
                // it should read as the heading, not as a default link.
                a {
                    color: inherit;
                    font-weight: inherit;
                    font-size: inherit;
                    line-height: inherit;
                    text-decoration: none;
                    transition: opacity 0.3s ease;

                    &:hover {
                        color: inherit;
                        text-decoration: underline;
                    }
                }
            }

            .desc{
                font-family: $raleway;
                font-weight: 400;
                color: #64451A;
                text-align: center;
                font-size: 18px;
                line-height: 28px;
                letter-spacing: 0%;
            }
        }

        .col-2 {
            .collection-slider {
                .owl-stage-outer {
                    .owl-stage {
                        .owl-item {
                            .item {
                                text-decoration: none;
                                display: block;
                                border: 1px solid rgba($brown, 0.3);
                                padding-bottom: 30px;

                                .image {
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }

                                .title {
                                    font-family: $raleway;
                                    text-align: center;
                                    color: $brown;
                                    font-weight: 500;
                                    font-size: 25px;
                                    line-height: 100%;
                                    letter-spacing: 0%;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 768px) {}

@media (min-width: 992px) {}

@media (min-width: 1200px) {
    .collection {
        margin-bottom: get-vw(100px);
        padding-bottom: get-vw(100px);

        .wrapper {
            .col-1 {
                padding: 0;
                width: get-vw(800px);
                margin: 0 auto get-vw(60px);

                .common-heading {
                    font-size: get-vw(32px);
                    margin-bottom: get-vw(20px);
                }

                .desc{
                    font-size: get-vw(20px);
                    line-height: get-vw(28px);
                }
            }

            .col-2 {
                .collection-slider {
                    padding: 0 get-vw(160px);

                    .owl-stage-outer {
                        .owl-stage {
                            .owl-item {
                                .item {
                                    border: none;
                                    padding-bottom: 0;

                                    .title {
                                        font-size: get-vw(25px);
                                    }
                                }
                            }
                        }
                    }

                    .owl-nav {
                        display: flex;
                        justify-content: space-between;
                        position: absolute;
                        align-items: center;
                        top: 50%;
                        transform: translateY(-50%);
                        width: auto;
                        left: get-vw(80px);
                        right: get-vw(80px);
                        margin: 0 auto;
                        height: 1px;

                        &.disabled {
                            display: none;
                        }

                        .owl-prev,
                        .owl-next {
                            svg {
                                width: get-vw(20px);
                                height: get-vw(20px);
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ---------------------------------------------------------------------------
   Jaipur Collection site only.

   That site has no Community section, so Collections is the last block before
   the footer. Its bottom margin existed to separate it from Community and would
   otherwise leave an empty band above the footer. The section's own
   padding-bottom already supplies the spacing - the same way .community sits
   against the footer on the main site.
   --------------------------------------------------------------------------- */

.site-jaipurcollection {
    .collection {
        margin-bottom: 0;
    }
}
