/* =================================================================== */
/* --- 1. Base Styles (Applied to ALL themes) --- */
/* =================================================================== */

.grid-banner-pro {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 130px;
    column-gap: 15px; /* This controls the horizontal space (left to right) */
    row-gap: 20px;    /* This controls the vertical space (top to bottom) */
    margin: 0 0 20px 0;   /* This controls the vertical space (top to bottom) for new instance */
}

.grid-pro-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.grid-pro-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.grid-pro-item img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    /* FIX: Set the default object-fit to cover for all images */
    object-fit: cover;
}


/* =================================================================== */
/* --- 2. Theme: Framed Premium Glow --- */
/* =================================================================== */

.theme-framed-glow .grid-pro-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    background-image: linear-gradient(45deg, #1c7fa8, #229ac8, #3bc3f0);
    background-size: 200% 200%;
    transition: background-position 0.8s ease-out;
}
.theme-framed-glow .grid-pro-item:hover {
    transform: translateY(-12px) scale(1.05);
    box-shadow: 0 15px 40px rgba(34, 154, 200, 0.45);
}
.theme-framed-glow .grid-pro-item:hover::before {
    background-position: 100% 100%;
}
.theme-framed-glow .grid-pro-item a {
    position: relative;
    z-index: 2;
    /* FIX: Changed from 'contain' to 'cover' */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: inset 0px 0px 25px 15px rgba(34, 154, 200, 0.9);
    transition: box-shadow 0.5s ease;
}
.theme-framed-glow .grid-pro-item:hover a {
    box-shadow: inset 0px 0px 30px 10px rgba(45, 175, 224, 0.7);
}
.theme-framed-glow .grid-pro-item img {
    display: none;
}


/* =================================================================== */
/* --- 3. Theme Isolation  --- */
/* =================================================================== */

.theme-elegant .grid-pro-item a,
.theme-glassmorphism .grid-pro-item a,
.theme-classic-grey .grid-pro-item a,
.theme-dark-mode .grid-pro-item a,
.theme-blue-outline .grid-pro-item a,
.theme-winter-snow .grid-pro-item a,
.theme-winter-snow-full .grid-pro-item a,
.theme-aurora-sky-blue .grid-pro-item a,
.theme-aurora-sky .grid-pro-item a,
.theme-basic .grid-pro-item a,
.theme-big-sale .grid-pro-item a,
.theme-big-sale-full .grid-pro-item a {
    background-image: none !important;
    box-shadow: none !important;
}


/* =================================================================== */
/* --- 4. Theme: Subtle & Elegant --- */
/* =================================================================== */

.theme-elegant .grid-pro-item {
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 5px rgba(35, 161, 209, 0.05), 0 8px 25px rgba(35, 161, 209, 0.08);
    background-image: linear-gradient(to bottom right, #ffffff, #eef8fc);
}
.theme-elegant .grid-pro-item:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 4px 8px rgba(35, 161, 209, 0.08), 0 15px 40px rgba(35, 161, 209, 0.15);
    border-color: rgba(255, 255, 255, 0.9);
}
.theme-elegant .grid-pro-item img {
    /* FIX: Changed from 'contain' to 'cover' to fill the area */
    object-fit: cover;
    /* FIX: Removed padding to allow the image to fill its container */
    padding: 0;
}


/* =================================================================== */
/* --- 5. Theme: Modern Glassmorphism --- */
/* =================================================================== */

.theme-glassmorphism .grid-pro-item {
    background: rgba(230, 245, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}
.theme-glassmorphism .grid-pro-item:hover {
    transform: translateY(-12px) scale(1.03);
    background: rgba(230, 245, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.2);
}
.theme-glassmorphism .grid-pro-item img {
    /* FIX: Changed from 'contain' to 'cover' */
    object-fit: cover;
    /* FIX: Removed padding */
    padding: 0;
}


/* =================================================================== */
/* --- 6. Theme: Classic Grey (Original Style) --- */
/* =================================================================== */

.theme-classic-grey .grid-pro-item {
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    background-color: #f5f5f7;
}
.theme-classic-grey .grid-pro-item:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.08);
}
.theme-classic-grey .grid-pro-item img {
    /* FIX: Changed from 'contain' to 'cover' */
    object-fit: cover;
    padding: 0;
    mix-blend-mode: multiply;
    opacity: 0.9;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.theme-classic-grey .grid-pro-item:hover img {
    transform: scale(1.15);
    opacity: 1;
}
.theme-classic-grey .grid-pro-item a::before {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: left 0.8s ease-in-out;
    pointer-events: none;
    z-index: 2;
}
.theme-classic-grey .grid-pro-item:hover a::before {
    left: 150%;
}


/* =================================================================== */
/* --- 7. FINAL THEME: Classic Dark Outline --- */
/* =================================================================== */

.theme-dark-mode .grid-pro-item {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    padding: 0;
}
.theme-dark-mode .grid-pro-item:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: #333333;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15), 0 8px 10px rgba(0, 0, 0, 0.1);
}
.theme-dark-mode .grid-pro-item a {
    background-color: transparent;
    border-radius: inherit;
}
.theme-dark-mode .grid-pro-item img {
    /* FIX: Changed from 'contain' to 'cover' */
    object-fit: cover;
    /* FIX: Removed padding */
    padding: 0;
    mix-blend-mode: multiply;
}


/* =================================================================== */
/* --- 8. NEW PREMIUM THEME: Blue Outline --- */
/* =================================================================== */

.theme-blue-outline .grid-pro-item {
    background-color: #ffffff;
    border: 1px solid #cceeff;
    box-shadow: 0 4px 8px rgba(34, 154, 200, 0.1);
    padding: 0;
}
.theme-blue-outline .grid-pro-item:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: #229ac8;
    box-shadow: 0 12px 28px rgba(34, 154, 200, 0.25), 0 8px 10px rgba(34, 154, 200, 0.2);
}
.theme-blue-outline .grid-pro-item a {
    background-color: transparent;
    border-radius: inherit;
}
.theme-blue-outline .grid-pro-item img {
    /* FIX: Changed from 'contain' to 'cover' */
    object-fit: cover;
    /* FIX: The padding was creating a white border inside the blue one. Removing it. */
    padding: 0;
}


/* =================================================================== */
/* --- 9. FINAL PREMIUM THEME: Crafted Linen (Balanced) --- */
/* =================================================================== */

.theme-crafted-linen .grid-pro-item {
    background-image: linear-gradient(315deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%),
                      linear-gradient(45deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 100%);
    background-color: #f0f0f0;
    border: 2px dashed rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 0 10px rgba(0,0,0,0.03);
    padding: 5px; 
    transition: all 0.4s ease;
}
.theme-crafted-linen .grid-pro-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.07), inset 0 0 10px rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.4);
}
.theme-crafted-linen .grid-pro-item a {
    /* FIX: Changed from 'contain' to 'cover' */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 10px;
}
.theme-crafted-linen .grid-pro-item img {
    display: none;
}


/* =================================================================== */
/* --- 10. SEASONAL THEME: Winter Snow --- */
/* =================================================================== */

.theme-winter-snow .grid-pro-item {
    background-color: #3a506b;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    padding: 3px;
}
.theme-winter-snow .grid-pro-item::before,
.theme-winter-snow .grid-pro-item::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="15" cy="15" r="3" fill="rgba(255,255,255,0.8)"/><circle cx="50" cy="20" r="2" fill="rgba(255,255,255,0.9)"/><circle cx="80" cy="10" r="2" fill="rgba(255,255,255,0.7)"/><circle cx="30" cy="40" r="3" fill="rgba(255,255,255,0.8)"/><circle cx="65" cy="55" r="2" fill="rgba(255,255,255,0.9)"/><circle cx="10" cy="70" r="3" fill="rgba(255,255,255,0.7)"/><circle cx="90" cy="85" r="2" fill="rgba(255,255,255,0.8)"/></svg>');
    animation: falling-snow 10s linear infinite;
    z-index: 1;
}
.theme-winter-snow .grid-pro-item::after {
    left: 50%;
    animation-delay: -5s;
    animation-duration: 8s;
}
@keyframes falling-snow {
    from { top: -100%; }
    to { top: 100%; }
}
.theme-winter-snow .grid-pro-item a {
    position: relative;
    z-index: 2;
    background-color: #fff;
    border-radius: 14px;
    display: block;
    width: 100%;
    height: 100%;
}
.theme-winter-snow .grid-pro-item a::before {
    display: none;
}
.theme-winter-snow .grid-pro-item img {
    /* FIX: Changed from 'contain' to 'cover' */
    object-fit: cover;
    /* FIX: Removed padding */
    padding: 0;
}


/* =================================================================== */
/* --- 11. SEASONAL THEME: Winter Snow Full Image --- */
/* =================================================================== */

.theme-winter-snow-full .grid-pro-item {
    background-color: #3a506b; 
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    padding: 3px; 
}
.theme-winter-snow-full .grid-pro-item::before,
.theme-winter-snow-full .grid-pro-item::after,
.theme-winter-snow-full .grid-pro-item a::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="15" cy="15" r="3" fill="rgba(255,255,255,0.8)"/><circle cx="50" cy="20" r="2" fill="rgba(255,255,255,0.9)"/><circle cx="80" cy="10" r="2" fill="rgba(255,255,255,0.7)"/><circle cx="30" cy="40" r="3" fill="rgba(255,255,255,0.8)"/><circle cx="65" cy="55" r="2" fill="rgba(255,255,255,0.9)"/><circle cx="10" cy="70" r="3" fill="rgba(255,255,255,0.7)"/><circle cx="90" cy="85" r="2" fill="rgba(255,255,255,0.8)"/></svg>');
    animation: falling-snow 10s linear infinite;
    z-index: 1;
}
.theme-winter-snow-full .grid-pro-item::after { left: 33%; animation-delay: -3s; animation-duration: 8s; }
.theme-winter-snow-full .grid-pro-item a::before { left: 66%; animation-delay: -6s; animation-duration: 12s; }

.theme-winter-snow-full .grid-pro-item a {
    position: relative;
    z-index: 2;
    background-color: #fff;
    border-radius: 14px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.theme-winter-snow-full .grid-pro-item img {
    display: block;
    width: 100%;
    height: 100%;
    /* FIX: Changed from 'contain' to 'cover' */
    object-fit: cover; 
    padding: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.theme-winter-snow-full .grid-pro-item:hover img {
    transform: scale(1.05);
}


/* =================================================================== */
/* --- 12. SEASONAL THEME: Big Sale (Running Rainbow) --- */
/* =================================================================== */
.theme-big-sale .grid-pro-item {
    padding: 3px;
    position: relative;
    background: #fff;
    z-index: 1;
}
.theme-big-sale .grid-pro-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    margin: -3px;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400% 400%;
    animation: running-rainbow 3s linear infinite;
}
@keyframes running-rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.theme-big-sale .grid-pro-item a {
    background-color: #fff;
    border-radius: 14px;
}
.theme-big-sale .grid-pro-item img {
    /* FIX: Changed from 'contain' to 'cover' */
    object-fit: cover;
    /* FIX: Removed padding */
    padding: 0;
    transition: transform 0.3s ease;
}
.theme-big-sale .grid-pro-item:hover img {
    transform: scale(1.08);
}


/* =================================================================== */
/* --- 13. SEASONAL THEME: Big Sale Full Image (Running Rainbow) --- */
/* =================================================================== */
.theme-big-sale-full .grid-pro-item {
    padding: 3px;
    position: relative;
    background: #fff;
    z-index: 1;
}
.theme-big-sale-full .grid-pro-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    margin: -3px;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    background-size: 400% 400%;
    animation: running-rainbow 3s linear infinite;
}
.theme-big-sale-full .grid-pro-item a {
    background-color: #fff;
    border-radius: 14px;
}
.theme-big-sale-full .grid-pro-item img {
    /* This was already correct, no change needed */
    object-fit: cover;
    padding: 0;
    border-radius: inherit;
    transition: transform 0.3s ease;
}
.theme-big-sale-full .grid-pro-item:hover img {
    transform: scale(1.08);
}


/* --- Other themes (14, 15, 16) already use object-fit: cover, so they are correct --- */

/* =================================================================== */
/* --- 14. THEME: Aurora Sky Simple Blue --- */
/* =================================================================== */
@-webkit-keyframes aurora-flow {
  0% { background-position: 0% 50%, 50% 100%, 100% 0%; }
  50% { background-position: 100% 50%, 0% 0%, 50% 100%; }
  100% { background-position: 0% 50%, 50% 100%, 100% 0%; }
}
@keyframes aurora-flow {
  0% { background-position: 0% 50%, 50% 100%, 100% 0%; }
  50% { background-position: 100% 50%, 0% 0%, 50% 100%; }
  100% { background-position: 0% 50%, 50% 100%, 100% 0%; }
}
.theme-aurora-sky-blue .grid-pro-item {
  position: relative !important;
  border-radius: 12px !important;
  transform-style: preserve-3d !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  overflow: hidden !important;
  padding: 12px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(0, 140, 186, 0.5), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(80, 200, 240, 0.4), transparent 50%),
    radial-gradient(circle at 60% 90%, rgba(0, 100, 150, 0.6), transparent 50%) !important;
  background-size: 300% 300%, 200% 200%, 250% 250% !important;
  -webkit-animation: aurora-flow 20s ease-in-out infinite !important;
  animation: aurora-flow 20s ease-in-out infinite !important;
}
.theme-aurora-sky-blue .grid-pro-item:hover {
  transform: scale(1.05) rotateX(4deg) rotateY(3deg) !important;
}
.theme-aurora-sky-blue .grid-pro-item a {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  background-color: #ffffff !important;
  border-radius: 6px !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  transform: translateZ(20px) !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.theme-aurora-sky-blue .grid-pro-item:hover a {
  transform: translateZ(40px) !important;
}
.theme-aurora-sky-blue .grid-pro-item a img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1) !important;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
.theme-aurora-sky-blue .grid-pro-item:hover a img {
  transform: scale(1.05) !important;
}


/* =================================================================== */
/* --- 15. THEME: Basic Style  --- */
/* =================================================================== */
@keyframes spin-gradient {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.theme-basic .grid-pro-item {
  position: relative;
  border-radius: 12px;
  background-color: #f0f4f7;
  padding: 3px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.theme-basic .grid-pro-item:hover {
  transform: scale(1.05) rotateX(4deg) rotateY(3deg);
}
.theme-basic .grid-pro-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  border-radius: 12px;
  background: conic-gradient( #008cba, #00d4ff, #ffffff, #00d4ff, #008cba );
  animation: spin-gradient 6s linear infinite;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: subtract;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: subtract;
}
.theme-basic .grid-pro-item a {
  display: block;
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  transform: translateZ(20px);
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.theme-basic .grid-pro-item:hover a {
  transform: translateZ(40px);
}
.theme-basic .grid-pro-item a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.theme-basic .grid-pro-item:hover a img {
  transform: scale(1.05);
}


/* =================================================================== */
/* --- 16. THEME: Aurora Sky Style  --- */
/* =================================================================== */
@keyframes spin-gradient-dashes { to { --angle: 360deg; } }
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.theme-aurora-sky .grid-pro-item {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important; 
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07) !important;
  background-color: white !important;
  padding: 6px !important;
  transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1) !important;
}
.theme-aurora-sky .grid-pro-item:hover {
  transform: translateY(-8px) !important;
}
.theme-aurora-sky .grid-pro-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: conic-gradient( from var(--angle, 0deg), #ff007f, #00d4ff, #ffee00, #00ff8f, #7f00ff, #ff007f ) !important;
  animation: spin-gradient-dashes 3s linear infinite !important;
  -webkit-mask: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23fff' stroke-width='6' stroke-dasharray='10, 6' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  mask: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='12' ry='12' stroke='%23fff' stroke-width='6' stroke-dasharray='10, 6' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
}
.theme-aurora-sky .grid-pro-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2;
  background: radial-gradient( circle at center, rgba(255, 238, 0, 0.7) 0%, rgba(255, 0, 127, 0.6) 40%, transparent 80% ) !important;
  opacity: 0;
  transform: translateX(-150%) translateY(-150%) rotate(45deg);
  transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.6s ease-out;
}
.theme-aurora-sky .grid-pro-item:hover::after {
  opacity: 1;
  transform: translateX(150%) translateY(150%) rotate(45deg);
}
.theme-aurora-sky .grid-pro-item a {
  display: block !important;
  position: relative !important;
  z-index: 1;
  background-color: white !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  height: 100% !important;
}
.theme-aurora-sky .grid-pro-item a img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* =================================================================== */
/* --- 17. Grid Positioning & Responsive (Applied to ALL themes) --- */
/* =================================================================== */

.pos-a1 { grid-area: 1 / 1 / 2 / 2; }
.pos-a2 { grid-area: 1 / 2 / 2 / 3; }
.pos-a3 { grid-area: 1 / 3 / 2 / 4; }
.pos-a4 { grid-area: 1 / 4 / 2 / 5; }
.pos-b1 { grid-area: 2 / 1 / 3 / 2; }
.pos-b2 { grid-area: 2 / 2 / 3 / 3; }
.pos-b3 { grid-area: 2 / 3 / 3 / 4; }
.pos-b4 { grid-area: 2 / 4 / 3 / 5; }
.pos-c1 { grid-area: 3 / 1 / 4 / 2; }
.pos-c2 { grid-area: 3 / 2 / 4 / 3; }
.pos-c3 { grid-area: 3 / 3 / 4 / 4; }
.pos-c4 { grid-area: 3 / 4 / 4 / 5; }
.pos-tall-left-top-2 { grid-area: 1 / 1 / 3 / 2; }
.pos-tall-left-mid-2 { grid-area: 2 / 1 / 4 / 2; }
.pos-tall-left-all-3 { grid-area: 1 / 1 / 4 / 2; }
.pos-tall-mid1-top-2 { grid-area: 1 / 2 / 3 / 3; }
.pos-tall-mid1-mid-2 { grid-area: 2 / 2 / 4 / 3; }
.pos-tall-mid1-all-3 { grid-area: 1 / 2 / 4 / 3; }
.pos-tall-mid2-top-2 { grid-area: 1 / 3 / 3 / 4; }
.pos-tall-mid2-mid-2 { grid-area: 2 / 3 / 4 / 4; }
.pos-tall-mid2-all-3 { grid-area: 1 / 3 / 4 / 4; }
.pos-tall-right-top-2 { grid-area: 1 / 4 / 3 / 5; }
.pos-tall-right-mid-2 { grid-area: 2 / 4 / 4 / 5; }
.pos-tall-right-all-3 { grid-area: 1 / 4 / 4 / 5; }

.pos-tall-left-middle1-2x3 { grid-area: 1 / 1 / 4 / 3; }
.pos-tall-middle1-middle2-2x3 { grid-area: 1 / 2 / 4 / 4; }
.pos-tall-middle2-right-2x3 { grid-area: 1 / 3 / 4 / 5; }
.pos-tall-left-middle1-middle2-3x3 { grid-area: 1 / 1 / 4 / 4; }
.pos-tall-middle1-middle2-left-3x3 { grid-area: 1 / 2 / 4 / 5; }

.pos-wide-top-mid1-2 { grid-area: 1 / 1 / 2 / 3; }
.pos-wide-top-mid2-2 { grid-area: 1 / 2 / 2 / 4; }
.pos-wide-top-mid2-right-2 { grid-area: 1 / 3 / 2 / 5; }
.pos-wide-mid-bottom-mid1-2 { grid-area: 2 / 1 / 3 / 3; }
.pos-wide-mid-bottom-mid2-2 { grid-area: 2 / 2 / 3 / 4; }
.pos-wide-mid-mid2-right-2 { grid-area: 2 / 3 / 3 / 5; }
.pos-wide-bottom-left-2 { grid-area: 3 / 1 / 4 / 3; }
.pos-wide-bottom-mid-2 { grid-area: 3 / 2 / 4 / 4; }
.pos-wide-bottom-mid2-right-2 { grid-area: 3 / 3 / 4 / 5; }
.pos-large-top-left-2x2 { grid-area: 1 / 1 / 3 / 3; }
.pos-large-bottom-left-2x2 { grid-area: 2 / 1 / 4 / 3; }
.pos-large-top-mid-2x2 { grid-area: 1 / 2 / 3 / 4; }
.pos-large-mid-bottom-2x2 { grid-area: 2 / 2 / 4 / 4; }
.pos-large-top-right-2x2 { grid-area: 1 / 3 / 3 / 5; }
.pos-large-bottom-right-2x2 { grid-area: 2 / 3 / 4 / 5; }
.pos-large-top-all-3x2 { grid-area: 1 / 1 / 3 / 4; }
.pos-large-mid-all-3x2 { grid-area: 2 / 1 / 4 / 4; }
.pos-large-top-right-3x2 { grid-area: 1 / 2 / 3 / 5; }
.pos-large-mid-right-3x2 { grid-area: 2 / 2 / 4 / 5; }

.pos-slim-wide-a { grid-column: 1 / 5; grid-row: 1 / 2; }
.pos-slim-wide-b { grid-column: 1 / 5; grid-row: 2 / 3; }
.pos-slim-wide-c { grid-column: 1 / 5; grid-row: 3 / 4; }
.pos-wide-ab     { grid-column: 1 / 5; grid-row: 1 / 3; }
.pos-wide-bc     { grid-column: 1 / 5; grid-row: 2 / 4; }
.pos-full-abc    { grid-column: 1 / 5; grid-row: 1 / 4; }

@media (max-width: 992px) {
    .grid-banner-pro { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .grid-pro-item { grid-area: auto !important; }
}
@media (max-width: 767px) {
    .grid-banner-pro { grid-template-columns: 1fr; gap: 15px; }
}