.projekt-archive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--spacing-small);
    row-gap: var(--spacing-small);
    padding-top: 1.5rem;
    border-top: 1px solid var(--black-alpha-2);
}

.projekt-archive-grid .content {
    z-index: 2;
}

.projekt-archive-grid .description {
    font-size: var(--font-size-small);
}

@media (max-width: 1280px) {
  .projekt-archive-grid {
        grid-template-columns: 1fr 1fr;
    }
}


.projekt-archive-item {
    padding: var(--spacing-default);
    aspect-ratio: 1 / 1.2;
}

@media (max-width: 860px) {
    .projekt-archive-grid {
        grid-template-columns: 1fr;
    }

    .projekt-archive-item .description {
        font-size: .9rem;
    }

    .projekt-archive-item {
    padding: var(--spacing-default);
    aspect-ratio: 1 / 1;
}
}


.projekt-archive-grid .arrow-wrapper {
    position: absolute;
    right: var(--spacing-default);
    bottom: var(--spacing-default);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    background: var(--light);
    padding: .5rem 1rem;
    border-radius: 10rem;
    cursor: pointer;
    transition-duration: var(--transition-duration);
}

.projekt-archive-grid .arrow-wrapper svg,
.projekt-archive-grid .arrow-wrapper img {
    width: 2.5rem;
    transition-duration: var(--transition-duration);
}

.projekt-archive-grid .arrow-wrapper:hover {
    transform: scale(1.1);
}

.project-favicon {
    position: absolute;
    bottom: var(--spacing-default);
    left: var(--spacing-default);
    z-index: 100;
    display: flex;
}

.project-favicon svg {
    width: 1.5rem;
    height: auto;
}

.project-favicon svg path {
    fill: var(--light);
}