.rank_card_4{
	    width: calc(25% - 1em);
		border: 1px solid #ccc;
		border-radius: 6px;
		background: #eee;
		text-align:center;
		}
.rank_card_4 > img{
	    border-radius: 6px;
		width: 100%;
		}			
        @media (max-width: 768px) {
			.rank_card_4 { min-width: 48%;}
        }
.rank_card_4 > a > img{
		object-fit: cover;
		border-radius: 6px;
		margin-bottom: 0.5em;
		aspect-ratio: 16 / 9;
		width: 100%;
		height: auto;
		}		
						
.rank_card_3{
	    width: calc(33% - 1em);
		border: 1px solid #ccc;
		border-radius: 6px;
		padding: 1em;
		background: #fff;
		margin: auto;
		}		
.rank_card_3 > img{
	    border-radius: 6px;
		width: 100%;
		}
.rank_card_2{
	    width: calc(50% - 1em);
		border: 1px solid #ccc;
		border-radius: 6px;
		padding: 1em;
		background: #fff;
		margin: auto;
		}		
.rank_card_2 > img{
	    border-radius: 6px;
		width: 100%;
		}		
		
.rank_card_1{
	    width: calc(33% - 1em);
		border: 1px solid #ccc;
		border-radius: 6px;
		background: #fff;
		margin: auto;
		text-align:center;
		}
.rank_card_1 > img{
	    border-radius: 6px;
		width: 100%;
		}			
        @media (max-width: 768px) {
			.rank_card_1 { width: calc(100% - 1em);}
        }
.rank_card_1 > a > img{
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.5em;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
		}					

.rank_card{
	    width: calc(100% - 1em);
		border: 1px solid #ccc;
		border-radius: 6px;
		background: #fff;
		margin: auto;
		text-align:center;
		}
.rank_card > img{
	    border-radius: 6px;
		width: 100%;
		}			
        @media (max-width: 768px) {
			.rank_card { width: calc(100% - 1em);}
        }
.rank_card > a > img{
		width: 100%;
		border-radius: 6px;
		}		

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1em;
}
.card-grid > button {
}
.card-grid > label > img {
	object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.5em;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

.card-checkbox {
  flex: 0 0 calc(25% - 1em);
  box-sizing: border-box;
  text-align: center;
  padding: 0.5em;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
}
        @media (max-width: 768px) {
		.card-checkbox {
		  flex: 0 0 calc(50% - 1em);
		  box-sizing: border-box;
		  text-align: center;
		  padding: 0.5em;
		  border: 1px solid #ddd;
		  border-radius: 8px;
		  background: #fafafa;
       }}
.card-checkbox input[type="checkbox"] {
  margin-bottom: 0.5em;
  position:absolute;
}
.card-checkbox > img {
	object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.5em;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}		

.form-container { margin-top: 1em; }
.form-group     { margin-bottom: 1.5em; }
.form-group label { font-weight: bold; display:block; margin-bottom:.5em; }		


.rank-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.rank-card-container > rank-card-item {
    width: calc(25% - 1em);
    box-sizing: border-box;
}		
        @media (max-width: 768px) {
.rank-card-container > rank-card-item {
			width: calc(50% - 1em);
			box-sizing: border-box;
			   }	}	
		
.rank-card-container > rank-card-item {
            width: calc(25% - 1em);
            box-sizing: border-box;
     		   }
	        @media (max-width: 768px) {
				.rank-card-container > rank-card-item {
				width: calc(50% - 1em);
				box-sizing: border-box;
				   }
				   }
		   
.rank-card-showcase {
	display: flex;
	gap: 0.3em;
	flex-wrap: wrap;
	margin:	1em;
	}				   
				   
        .rank-filter {
            display: flex;
		    flex-wrap: wrap;
    		margin: 1em;
        }
        .rank-filter a {
            margin-right: 10px;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            font-size: 0.9em;
        }
        .rank-filter a.active {
            background: #333;
            color: #fff;
            border-color: #333;
        }