User:Dread/TestLoadout.css

.main-wrapper {
    background: #0b0e15;
    color: #aaa;
    font-family: sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    padding: 20px;
    display: inline-grid;
    grid-template-columns: 1fr 2fr 2fr; /* 3 columns: left, middle, right */
    gap: 20px;
    overflow: auto;
}

.left-section {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 15px;
}

.left-section .top-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
	
.left-section .bottom-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

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

.left-section .weapons {display: grid;}
.left-section .big-cell {
	height: 100px;
	background: #1a1a1a;
	border: 2px solid #444;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.middle-section {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 15px;
	align-items: flex-start;
}

.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 {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 15px;
	justify-content: flex-start;
}

.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: 80px;
}
.right-section .section-title {  
	margin-top: 80px;
}
.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;
}