/* ---------------- Portfolio styles ---------------- */

.portfolio {
    padding: 2rem 2rem;
    margin-bottom: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media only screen and (max-width: 850px) {
    .portfolio {
        padding: 2rem 0;
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Items */

.portfolio-item-container,
.portfolio-item-container:visited,
.portfolio-item-container:hover,
.portfolio-item-container:focus,
.portfolio-item-container:active {
    color: var(--text);
    text-decoration: none;
}

.portfolio-item-container:hover,
.portfolio-item-container:focus {
    z-index: 128;
}

.portfolio-item {
    background-color: #e9e9e9;
    box-shadow: 0 10px 8px #0000001c;
}

.portfolio-item:hover,
.portfolio-item:focus {
    box-shadow: 0 0 64px #b1143688;
}

.portfolio-item>* {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.portfolio-item img {
    display: block;
    width: 100%;
    padding: 0;
    border-radius: 5px 5px 0 0;
}