﻿a {
    color: var(--accent-color);
}

#project-about {
    .container {
        width: 50%;
        background: white;
        border-radius: 15px;
        padding: 3rem;
    }

    h3 {
        padding: 1rem 1rem 0;
        font-size: 1.5rem;
    }
}

#project-gallery {
    .container {
        max-width: none;
        width: 90% !important;
    }

    ul {
        columns: 40vw !important;
        list-style: none;

        /*display: grid;*/
        /*grid-template-columns: repeat(2, 1fr);*/
        gap: 2rem;
    }

    li {
        display: grid;

        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        align-items: center;

        background: white;
        padding: 1rem;
        border-radius: 5px;

        margin-bottom: 2rem;

        .image {
            img, video {
                max-width: 100%;
                border-radius: 5px;
            }
        }
    }
}

@media (min-width: 2100px) {
    #project-gallery {
        ul {
            columns: 25vw !important;
        }
    }
}

@media (max-width: 1024px) {
    #project-about {
        .container {
            width: 80%;
        }
    }

    #project-gallery {
        ul {
            columns: 100vw !important;

            justify-self: center;
        }
    }
}

@media (max-width: 768px) {
    #project-gallery {
        li {
            grid-template-columns: repeat(1, 1fr) !important;
        }
    }
}