.projects__info {
    align-items: flex-end;
    margin-bottom: 32px;
}

.projects__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 500px;
    grid-column-gap: 32px;
    opacity: 1;
    transition: opacity 220ms ease;
}

.projects__item {
    position: relative;
    justify-content: center;
    align-items: center;
    touch-action: pan-y;
}

.projects__itemButtonLeft,
.projects__itemButtonRight {
    background-color: #ffffff33;
    backdrop-filter: blur(3px);
}

.projects__itemButtonLeft img,
.projects__itemButtonRight img {
    filter: brightness(0) invert(1);
}

.projects__itemButtonLeft {
    position: absolute;
    left: 24px;
}

.projects__itemButtonRight {
    position: absolute;
    right: 24px;
}

.projects__itemImage {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 220ms ease;
}

.projects__itemPagination {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    gap: 8px;
    z-index: 2;
}

.projects__itemPaginationDot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #ffffff4d;
    cursor: pointer;
    transition: background-color 200ms ease;
}

.projects__itemPaginationDot.is-active {
    background-color: #000000;
}

.projects__itemDescription {
    gap: 16px;
    padding: 24px;
    padding-left: 0;
    touch-action: pan-y;
}

.project__itemTags {
    gap: 8px;
}

.project__itemTag {
    padding: 8px 12px;
    gap: 8px;
    justify-content: center;
    align-items: center;
    border: 1px solid;
}

.projects__itemButtons {
    gap: 24px;
}

.project__itemTag img {
    filter: brightness(0) invert(0);
    max-width: 32px;
    max-height: 32px;
}

.projects__itemDescriptionText {
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 1450px) {
    .projects__list {
        display: flex;
    }

    .projects__item {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .projects__itemImage {
        object-fit: cover;
    }

    .projects__itemDescription {
        padding-left: 24px;
    }

    .projects__info {
        margin-bottom: 16px;
    }
}

@media (max-width: 550px) {
    .projects__info {
        margin-bottom: 8px;
    }

    .project__itemTags {
        flex-wrap: wrap;
    }

    .projects__itemDescription {
        padding: 16px;
    }

    .projects__itemButtons {
        margin: 0 auto;
    }
}