/*--------------------------------------------- Projects Section CSS -----------------------------------------*/
#projects {
    display: grid;
    text-decoration: none;
}

/*Project Class*/
.atomic-project {
    width: 45%;
    margin-bottom: 2%;
    border-radius: 0.625rem;
    padding: 1% 4%;
    background-color: black;
    transition: box-shadow 1.5s ease-out,
        background-color 1.8s ease-in-out;
}

.atomic-project:hover {
    box-shadow: inset 50rem 0 1px 0 rgba(51, 68, 119, .5);
    background-color: transparent;
}

/*Το CTA και το intro-header επηρεάζουν την σειρά κατάταξης των projects στην σκάλα*/
.atomic-project:nth-child(4n+2) {
    justify-self: start;
}

.atomic-project:nth-child(2n+3) {
    justify-self: center;
}

.atomic-project:nth-child(4n+4) {
    justify-self: end;
}

/*Change Default link styles*/
.atomic-project>a {
    text-decoration: none;
    color: var(--mainTextColor);
}

.project-title {
    color: var(--red-secondary);
    text-align: center;
    font-size: 2.5rem;
    font-family: Archivo, "sans-serif";
    margin-bottom: 0;
}

.project-subtitle {
    margin-top: .5rem;
    color: var(--red-secondary);
    text-align: center;
    font-size: 1.5rem;
    font-family: Archivo, "sans-serif";
}

.project-description {
    text-align: justify;
    text-justify: distribute;
    font-size: 1.3rem;
    margin-top: 0;
    font-family: 'Playfair Display', serif;
}

@media screen and (min-width:360px) and (max-width:700px) {
    #projects {
        justify-content: center;
    }

    .atomic-project {
        width: 80%;
        padding: 5% 10%;
        margin-bottom: 10%;
    }

    .atomic-project:nth-child(4n+2),
    .atomic-project:nth-child(2n+3),
    .atomic-project:nth-child(4n+4) {
        justify-self: center;
    }
}

@media screen and (min-width: 700px) and (max-width:1000px) {
    .atomic-project {
        width: 65%;
    }

    .atomic-project:hover {
        box-shadow: inset 65vw 0 1px 0 rgba(51, 68, 119, .5);
    }
}