body.page-id-2217 h1 {
  text-align: center;
  padding-top: max(2rem, 5vh);
}

.characters-gallery-wrapper {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

/* Default background for light mode */
.character-card {
    text-align: center;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 8px;
    transition: transform 0.2s;
    background: #fff;  
}

.darkmode .character-card {
    background: #1a1a1a;  /* Dark mode background */
}

.character-card:hover {
    transform: scale(1.05);
}

.character-card img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    object-fit: cover;
}
.character-card p {
    font-size: 0.95rem; /* Smaller font size for the text */
    margin-top: 5px; /* Small gap between image and text */
    margin-bottom: 0; /* Remove unnecessary bottom margin */
}

/* On smaller screens (phones), adjust for better layout */
@media (max-width: 900px) {
    .characters-gallery-wrapper {
        padding: 0;  /* Remove extra padding on wrapper */
        width: 100%;  /* Ensure it spans the full width */
    }

    .character-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* Make columns smaller */
        gap: 8px;  /* Reduce the gap between items */
    }

    .character-card {
        font-size: 0.8rem;  /* Reduce text size for mobile */
        padding: 2px;
        box-sizing: border-box;  /* Prevent overflowing */
    }

    .character-card img {
        width: 100%;  /* Ensure images fill the container */
        height: auto;  /* Maintain aspect ratio */
    }
}


/* On smaller screens (phones), adjust for better layout */
@media (max-width: 600px) {
    .characters-gallery-wrapper {
        padding: 0;  /* Remove extra padding on wrapper */
        width: 100%;  /* Ensure it spans the full width */
    }

    .character-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Make columns smaller */
        gap: 8px;  /* Reduce the gap between items */
    }

    .character-card {
        font-size: 0.7rem;  /* Reduce text size for mobile */
        padding: 2px;
        box-sizing: border-box;  /* Prevent overflowing */
    }

    .character-card img {
        width: 100%;  /* Ensure images fill the container */
        height: auto;  /* Maintain aspect ratio */
    }
}