User:Dread/TestLoadout.css

.main-wrapper {
    background: #0b0e15;
    color: white;
    font-family: sans-serif;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 2fr 2fr; /* 3 columns: left, middle, right */
    gap: 20px;
    justify-items: start; /* Align items to the left */
    width: 100px;
}
.section-title {
    font-size: 14px;
    margin-bottom: 5px;
    text-transform: uppercase;
    color: #aaa;
}

    /* === Left Section === */
.left-section {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 15px;
    width: 100%;
}

.left-section .top-row {
    display: flex;
    align-items: center;
	margin-bottom: 10px;
    gap: 10px;
}
	
.left-section .bottom-row {
	display: flex;
	align-items: center;
	gap: 10px; /* same fixed gap as top row */
}

.left-section .small-cell {
   width: 60px;
   height: 60px;
   background: #1a1a1a;
   border: 2px solid #444;
   display: flex;
   align-items: center;
   justify-content: center;
}

.left-section .big-cell {
	width: 180px; 
	aspect-ratio: 1.5;
	background: #1a1a1a;
	border: 2px solid #444;
	display: flex;
	align-items: center;
	justify-content: center;
}

.left-section .big-cell img {
    max-width: 100px;
    max-height: 100px;
}

    /* === Middle Section === */
.middle-section {
	width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 15px;
}

.middle-section .backpack-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); 
	grid-template-rows: repeat(4, 1fr);
	gap: 15px;
}

.middle-section .small-cell {
    width: 60px;
    height: 60px;
    background: #1a1a1a;
    border: 2px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* === Right Section === */
.right-section {
  	width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 15px;
}

.right-section .quick-use-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
}

.right-section .small-cell {
    width: 60px;
    height: 60px;
    background: #1a1a1a;
    border: 2px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px; /* Increase size of + symbol */
    color: #666; /* Light color for the + symbol */
}

.middle-section .section-title {  
	margin-top: 90px;
}
.right-section .section-title {  
	margin-top: 90px;
}
.small-cell, .big-cell {
	border-radius: 6px;
}

  /* === Safe Pocket Section === */
.right-section .safe-pocket-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}