.tag-wrapper { max-width: 100%; margin: 40px auto; }
.tag-controls { display: flex; justify-content: flex-end; gap: 15px; margin-bottom: 30px; }
.tag-controls input, .tag-controls select { padding: 12px; border: 1px solid #ccc; border-radius: 4px; }

.tag-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 50px; 
}

.tag-card { 
    position: relative; 
    aspect-ratio: 4 / 5; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes content to bottom */
    background-color: #eee;
    overflow: hidden;
     /* Creates the small gap around the black box if desired */
}

.tag-image-area { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-size: cover; background-position: center; 
    z-index: 1;
}

.tag-info { 
    position: relative;
    z-index: 2;
    background: #04140C; 
    color: #ffffff; 
    text-align: center; 
    padding: 20px 30px;
    width: 100%;
    box-sizing: border-box;
}

/* Custom P tag for Heading */
p.tag-name { 
    margin: 0 !important; 
    padding: 0 !important;
    font-size: 20px !important; 
    font-weight: 800 !important; 
    color: #ffffff !important; 
    text-transform: uppercase;
    line-height: 1.2;
}

.tag-role { 
    font-size: 13px; 
    text-transform: uppercase; 
    margin-top: 8px; 
    letter-spacing: 1px;
    opacity: 0.9;
}

.tag-pagination { display: flex; justify-content: center; gap: 15px; margin-top: 40px; }
.tag-page-btn { border: none; background: none; cursor: pointer; font-size: 16px; font-weight: bold; padding: 5px 10px; }
.tag-page-btn.active { background: #000; color: #fff; border-radius: 50%; width: 35px; height: 35px; }

@media (max-width: 768px) { .tag-grid { grid-template-columns: repeat(2, 1fr); } }