```css
/* =========================================================
   PREMIUM JEWELLERY CATEGORY
   DESKTOP + TABLET
   CSS ONLY
   ========================================================= */


/* =========================================================
   COMMON
   ========================================================= */

@media (min-width: 768px) {

    /* Main section */
    .elementor-element-4211f9c {
        padding: 35px 0 !important;
        background: #fff;
    }

    .elementor-element-4211f9c > .elementor-container {
        max-width: 1380px !important;
        width: 100% !important;
        padding: 0 25px !important;
    }


    /* =====================================================
       CREATE PREMIUM GRID
       ===================================================== */

    .elementor-element-4211f9c
    > .elementor-container
    > .elementor-row {

        display: grid !important;

        grid-template-columns:
            repeat(3, 1fr);

        grid-template-rows:
            auto auto;

        gap: 18px;

        margin: 0 !important;
    }


    /* Main 3 columns become grid items */
    .elementor-element-4211f9c
    > .elementor-container
    > .elementor-row
    > .elementor-column {

        width: auto !important;
        max-width: none !important;

        padding: 0 !important;
        margin: 0 !important;
    }


    /* =====================================================
       LEFT CATEGORY
       ===================================================== */

    .elementor-element-4211f9c
    > .elementor-container
    > .elementor-row
    > .elementor-column:nth-child(1) {

        grid-column: 1;
        grid-row: 1 / span 2;
    }


    /* =====================================================
       CENTER CATEGORY
       ===================================================== */

    .elementor-element-4211f9c
    > .elementor-container
    > .elementor-row
    > .elementor-column:nth-child(2) {

        grid-column: 2 / span 2;
        grid-row: 1 / span 2;
    }


    /* =====================================================
       RIGHT CATEGORY
       ===================================================== */

    .elementor-element-4211f9c
    > .elementor-container
    > .elementor-row
    > .elementor-column:nth-child(3) {

        grid-column: 3;
        grid-row: 1 / span 2;
    }


    /* =====================================================
       CENTER INNER LAYOUT
       ===================================================== */

    .elementor-element-4211f9c
    .elementor-column:nth-child(2)
    > .elementor-column-wrap
    > .elementor-widget-wrap {

        display: grid !important;

        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            auto auto;

        gap: 18px;

        height: 100%;
    }


    /* Center top banner */
    .elementor-element-4211f9c
    .elementor-column:nth-child(2)
    .elementor-inner-section:first-child {

        grid-column: 1 / span 2;
        grid-row: 1;

        width: 100% !important;
        margin: 0 !important;
    }


    /* Center bottom left */
    .elementor-element-4211f9c
    .elementor-column:nth-child(2)
    .elementor-inner-section:last-child
    .elementor-column:first-child {

        width: 50% !important;
    }


    /* Center bottom right */
    .elementor-element-4211f9c
    .elementor-column:nth-child(2)
    .elementor-inner-section:last-child
    .elementor-column:last-child {

        width: 50% !important;
    }


    /* =====================================================
       BANNER BASE
       ===================================================== */

    .elementor-element-4211f9c .bwp-widget-banner,
    .elementor-element-4211f9c .bg-banner,
    .elementor-element-4211f9c .banner-wrapper,
    .elementor-element-4211f9c .bwp-image {

        width: 100%;
        height: 100%;
    }


    .elementor-element-4211f9c .banner-wrapper {

        position: relative;

        overflow: hidden;

        background: #f5f2ed;

        box-shadow:
            0 8px 25px rgba(0,0,0,.07);

        transition:
            transform .6s ease,
            box-shadow .6s ease;
    }


    .elementor-element-4211f9c
    .banner-wrapper:hover {

        transform: translateY(-4px);

        box-shadow:
            0 20px 45px rgba(0,0,0,.14);
    }


    /* =====================================================
       IMAGE
       ===================================================== */

    .elementor-element-4211f9c
    .bwp-image a {

        display: block;

        position: relative;

        width: 100%;
        height: 100%;

        overflow: hidden;
    }


    .elementor-element-4211f9c
    .bwp-image img {

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        transition:
            transform 1.2s
            cubic-bezier(.2,.7,.2,1);
    }


    .elementor-element-4211f9c
    .banner-wrapper:hover
    .bwp-image img {

        transform: scale(1.06);
    }


    /* Remove old animation */
    .elementor-element-4211f9c
    .elementor-animation-wobble-horizontal {

        animation: none !important;
    }


    /* =====================================================
       PREMIUM IMAGE OVERLAY
       ===================================================== */

    .elementor-element-4211f9c
    .bwp-image a::after {

        content: "";

        position: absolute;

        inset: 0;

        background:
            linear-gradient(
                to top,
                rgba(0,0,0,.72) 0%,
                rgba(0,0,0,.30) 38%,
                rgba(0,0,0,0) 72%
            );

        z-index: 1;

        pointer-events: none;
    }


    /* =====================================================
       CATEGORY TEXT
       ===================================================== */

    .elementor-element-4211f9c
    .banner-wrapper-infor {

        position: absolute;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 5;

        padding: 35px 25px 30px;

        text-align: center;

        pointer-events: none;
    }


    .elementor-element-4211f9c
    .banner-wrapper-infor .content {

        display: flex;

        justify-content: center;

        align-items: center;
    }


    /* =====================================================
       LUXURY FONT
       ===================================================== */

    .elementor-element-4211f9c
    .title-banner {

        position: relative;

        margin: 0 !important;

        padding: 0 0 13px !important;

        font-family:
            "Cormorant Garamond",
            Georgia,
            serif !important;

        font-size: 30px !important;

        font-weight: 500 !important;

        line-height: 1.1 !important;

        letter-spacing: .6px !important;

        text-transform: none !important;

        color: #fff !important;

        text-shadow:
            0 2px 12px rgba(0,0,0,.4);
    }


    /* =====================================================
       GOLD LINE
       ===================================================== */

    .elementor-element-4211f9c
    .title-banner::after {

        content: "";

        position: absolute;

        bottom: 0;
        left: 50%;

        width: 38px;
        height: 1px;

        transform:
            translateX(-50%);

        background: #d4af37;

        transition:
            width .5s ease;
    }


    .elementor-element-4211f9c
    .banner-wrapper:hover
    .title-banner::after {

        width: 75px;
    }


    /* =====================================================
       PREMIUM BORDER
       ===================================================== */

    .elementor-element-4211f9c
    .banner-wrapper::before {

        content: "";

        position: absolute;

        inset: 12px;

        border:
            1px solid
            rgba(255,255,255,.45);

        z-index: 4;

        pointer-events: none;

        opacity: 0;

        transition:
            opacity .5s ease,
            inset .5s ease;
    }


    .elementor-element-4211f9c
    .banner-wrapper:hover::before {

        opacity: 1;

        inset: 16px;
    }

}


/* =========================================================
   DESKTOP
   1025px+
   ========================================================= */

@media (min-width: 1025px) {

    .elementor-element-4211f9c
    > .elementor-container {

        padding-left: 30px !important;
        padding-right: 30px !important;
    }


    .elementor-element-4211f9c
    > .elementor-container
    > .elementor-row {

        gap: 22px;
    }


    /* Tall side images */
    .elementor-element-4211f9c
    > .elementor-container
    > .elementor-row
    > .elementor-column:first-child
    .bwp-image img,

    .elementor-element-4211f9c
    > .elementor-container
    > .elementor-row
    > .elementor-column:last-child
    .bwp-image img {

        aspect-ratio: 4 / 5;

        object-fit: cover;
    }


    /* Center main image */
    .elementor-element-4211f9c
    .elementor-column:nth-child(2)
    .elementor-inner-section:first-child
    .bwp-image img {

        aspect-ratio: 16 / 8;

        object-fit: cover;
    }


    /* Center small images */
    .elementor-element-4211f9c
    .elementor-column:nth-child(2)
    .elementor-inner-section:last-child
    .bwp-image img {

        aspect-ratio: 1 / 1;

        object-fit: cover;
    }


    .elementor-element-4211f9c
    .title-banner {

        font-size: 32px !important;

        letter-spacing: .8px !important;
    }

}


/* =========================================================
   TABLET
   768px — 1024px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .elementor-element-4211f9c {

        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }


    .elementor-element-4211f9c
    > .elementor-container {

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .elementor-element-4211f9c
    > .elementor-container
    > .elementor-row {

        gap: 12px;
    }


    /* Tablet title */
    .elementor-element-4211f9c
    .title-banner {

        font-size: 24px !important;

        letter-spacing: .4px !important;
    }


    .elementor-element-4211f9c
    .banner-wrapper-infor {

        padding:
            22px
            15px
            20px;
    }


    /* Tablet border */
    .elementor-element-4211f9c
    .banner-wrapper::before {

        inset: 8px;
    }


    /* Tablet hover */
    .elementor-element-4211f9c
    .banner-wrapper:hover {

        transform: translateY(-2px);
    }

}