.switch-wrapper {
position: relative;
width: 90%;
margin: 0 auto 40px auto;
}

.switch {
user-select: none;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
height: 40px;
width: 100%;
background: #333333;
border: 5px solid #333333;
box-sizing: border-box;
}

.switch-slider {
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
background: rgba(255,255,255,0.5);
transition: transform 0.4s;
}

.sw-btn {
flex: 1;
background: none;
border: none;
color: white;
z-index: 2;
cursor: pointer;
font-size: 0.875rem;
transition: color 0.4s, background 0.4s;
}

.sw-btn.active {  color: black; }

.sw-btn[data-no-content] {
color: white;
font-weight: bold;
flex: 0 0 40px;
max-width: 40px;
min-width: 40px;
height: 40px;
}

.sw-btn[data-no-content].active {
background: #b32400;
color: white;
}

.switch-content {
display: none;
padding: 12px;
background: none;
width: 100%;
box-sizing: border-box;
border: 5px double #555555;
margin: 0;
margin-top: 5px;
}

.pagination-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin: auto 0;
flex-wrap: wrap;
}

.pagination-controls button {
padding: 10px;
margin-top: 10px;
border: 2px solid #000000;
box-shadow: 0 0 10px #000000;
border-radius: 50%;
background: #404040;
color: #fff;
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
-webkit-tap-highlight-color: transparent;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}

.pagination-controls button:hover {
background: #009933;
color: #000000;
box-shadow: 0 0 10px #216E21;
transition: 0.2s;
}


@media screen and (max-width: 922px) {

.switch-wrapper { width: 98%;  }

.switch {
flex-wrap: wrap;
height: auto;
align-items: stretch;
background: none;
}

.sw-btn {
padding: 4%;
margin: 2px;
flex: 1 1 auto;
background: #333333;
}

.sw-btn[data-no-content] {
flex: 1 1 calc(33% - 4px); 
height: auto;
}

.switch-slider {  display: none !important; }
.sw-btn.active {  background: rgba(255,255,255,0.25); }

.switch-content {
font-size: 15px;
padding: 10px;
}

}