/* Define Custom Properties (CSS Variables) */
:root {
    --black: #000000;
    --raisin-black: #231f20ff;
    --onyx: #404041ff;
    --davys-gray: #58585aff;
    --dim-gray: #6d6e71ff;
    --gray: #818285ff;
    --silver: #bdbec0ff;
    --platinum: #e7e8e9ff;
    --white: #ffffffff;
}


/* Customize the carousel size */
.home-carousel {
    background: #EEE;
    margin: auto;
}

.social-grid-carousel {
    background: #EEE;
    margin: auto;
}

.carousel-cell {
    width: 24%;
    /* Show 3 items per row on larger screens */
    background-size: cover;
    background-position: center;
    padding: 10px;
    box-sizing: border-box;
}

.carousel-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style the custom navigation buttons */
.carousel-nav {
    margin-top: 10px;
}

.carousel-nav button {
    padding: 10px 20px;
    margin: 0 5px;
    font-size: 16px;
    cursor: pointer;
}

/* Extra-large screens (1500px and up) */
@media (min-width: 1500px) {
    .carousel-cell {
        width: 25%;
        /* 3 items per row */
    }
}

/* Large screens (1200px to 1499px) */
@media (max-width: 1499px) {
    .carousel-cell {
        width: 33.33%;
        /* 2–3 items per row */
    }
}

@media (max-width: 1200px) {
    .carousel-cell {
        width: 35%;
        /* Show 1 item per row on small screens */
    }
}

@media (max-width: 1000px) {
    .carousel-cell {
        width: 38%;
        /* Show 1 item per row on small screens */
    }
}

@media (max-width: 768px) {
    .carousel-cell {
        width: 54%;
        /* Show 1 item per row on small screens */
    }
}

/* Media query for small screens (mobile devices) */
@media (max-width: 576px) {
    .carousel-cell {
        width: 60%;
        /* Show 1 item per row on small screens */
    }
}

/* Media query for small screens (mobile devices) */
@media (max-width: 500px) {
    .carousel-cell {
        width: 75%;
        /* Show 1 item per row on small screens */
    }
}

/* Media query for small screens (mobile devices) */
@media (max-width: 400px) {
    .carousel-cell {
        width: 82%;
        /* Show 1 item per row on small screens */
    }
}