/* Container for all posts (Desktop) */
#custom-filter-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 60px;
}

/* Container for all posts (Laptop/Tablet) */

@media screen and (max-width: 1024px) {
#custom-filter-container {
    grid-template-columns: repeat(2,1fr);
    
}
}

/* Container for all posts (Mobile) */

@media screen and (max-width: 767px) {
#custom-filter-container {
    grid-template-columns: repeat(1,1fr);
    }
}

/* Post container (Student work piece) */
.post {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Post image */
.post > img  {
    aspect-ratio: 16 / 9;
    max-width: 400px;
}

/* Post button */
.elementor-post__read-more {
    color: #040d12 !important;
    font-weight: 500 !important;
}

/* Post title and excerpt container */
.post-content {
    flex: 1;
}

.post-content h2 {
    color: #f4f4f4;
}

.post-content > p {
        font-size: var(--e-global-typography-9158466-font-size);
        line-height: var(--e-global-typography-9158466-line-height);
        letter-spacing: var(--e-global-typography-9158466-letter-spacing);
        word-spacing: var(--e-global-typography-9158466-word-spacing);
}

input[type=checkbox]{
    accent-color:  #06bcc1; 
    }


label {
    cursor: pointer;
}

    

/* Search button (not needed as AJAX refreshes page on checkbox click */
input[type="submit"] {
    display: none;
}

.tag-filter h4 {
    font-size: 24px;
    text-decoration: underline;
    text-decoration-color: #06bcc1 !important;
    text-underline-offset: 0.2em !important;
    text-decoration-thickness: 2px !important;
}

.no-projects-text {
    text-decoration: none !important;
    text-align: center;
    grid-column: 1 / span 3;
}

.filter-title {
    text-transform: capitalize;
}

#category-title {
    font-size: clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem);
    font-family: "Oswald", sans-serif;
}

#tags-title {
font-size: 1.125rem;
font-family: "Maven Pro", sans-serif;
}

.hidden {
    display: none !important;
}

/* CSS Spinner */
.loader {
    width: 30px;
    height: 30px;
    border: 5px solid #040d12;
    border-bottom-color: #06bcc1;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }