portfolio/assets/styles/components/projects.scss

.projects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;

    .project-card {
        border: 1px solid gray;
        padding: 1.5em;
        border-radius: 5px;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .project-top {
        display: flex;

    }

    .project-left {
        width: 100%;
    }

    .project-title {
        font-size: 1em;
        padding-bottom: 1em;
    }
    .project-description {
        font-size: .9em;
        color: gray;
    }
    .project-img {
        width: 5em;
    }

    .project-right {
        padding-left: .5em;

    }

    .project-bottom {
        padding-top: 1em;
    }
}


@media(min-width: $lg-breakpoint) {
    .projects {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media(max-width: $md-breakpoint) {
    .projects {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: $sm-breakpoint) {
    .projects {
        grid-template-columns: 1fr;
    }

    .project-right {
        padding-left: 1em !important;
    }
}