.projects {
    background-color: #f5f5f5
}

.projects__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.projects__box {
    background-color: white;
    border: none;
}

.projects__technologies {
 font-size: 2rem;
 opacity: .8;
}

.projects__card {
    align-items: center;
    gap: 1rem;
}

.projects__img {
    height: 200px;
    width: 300px;
}

.projects__buttons {
    margin-top: 1rem;
}

.projects__buttons a {
    margin: 0 1rem 0 1rem;
    border: 1px solid white;
    background: #f5f5f5;
    padding: .75rem;
    color: rgb(112, 112, 112);
    border-radius: 1rem;
}

@media screen and (min-width: 1024px) {
    .projects__card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "img text"
                            "img tech"
                             "img buttons";
        justify-items: center;
    }

    .projects__technologies {
        grid-area: tech;
        align-self: center;
    }

    .projects__img--container {
        grid-area: img;
    }

    .projects__img {
        height: 250px;
        width: 350px;
    }

    .projects__text {
        grid-area: text;
        text-align: center;
        align-self: flex-end;
    }

    .projects__buttons {
        grid-area: buttons;
        align-self: flex-start;
    }

    .projects__buttons a:hover {
        box-shadow: 1px 2px 8px rgb(97, 97, 97);
        font-weight: 500;
        transform: scale(.95);
        transition: .8s;
        border-radius: 2rem;
        font-weight: bold;
        color: rgb(97, 123, 131);
    }
}