.list-section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.list-header {
    justify-content: space-between;
    align-items: center;
    display: flex;
    margin-bottom: 2rem;
}

.list-header h2 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
    align-items: center;
    display: flex;
}

.list-more {
    white-space: nowrap;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-weight: 600;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
    border-radius: 9999px;
    align-items: center;
    display: inline-flex;
}

.list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.list-item {
    border-radius: .75rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 1rem;
}

.list-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.list-icon {
    position: relative;
}

.list-icon img {
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 1rem;
    height: 5rem;
    width: 5rem;
    max-width: 100%;
}

.list-mod {
    --tw-translate-x: -50%;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    left: 50%;
    bottom: -11px;
    position: absolute;
}

.list-mod span {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-weight: 500;
    font-size: .75rem;
    line-height: 1rem;
    padding-top: .125rem;
    padding-bottom: .125rem;
    padding-left: .625rem;
    padding-right: .625rem;
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
    border-radius: 9999px;
    align-items: center;
    display: inline-flex;
    margin-top: .5rem;
}

.list-info {
    flex: 1 1 0%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-title-header {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.list-title {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity, 1));
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-title-tag {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity, 1));
    text-transform: uppercase;
    font-weight: 500;
    font-size: .75rem;
    line-height: 1rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
    border-radius: 9999px;
    align-items: center;
    display: inline-flex;
}

.list-text-con {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
    font-size: .875rem;
    line-height: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    margin-top: .25rem;
}

.list-text {
    align-items: center;
    display: inline-flex;
    margin-left: .75rem;
}

.list-text-size {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.list-version-con {
    gap: .75rem;
    align-items: center;
    display: flex;
    margin-top: .5rem;
}

.list-version {
    font-size: .75rem;
    line-height: 1rem;
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.list-version-text {
    color: rgb(22, 163, 74);
    font-size: .75rem;
    line-height: 1rem;
    gap: .25rem;
    align-items: center;
    display: inline-flex;
}

.list-item:hover {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.pagination {
    justify-content: center;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    border-radius: 0.25rem;
}

.pagination .page-link {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    background: #F0F2F5;
    border-color: #F0F2F5;
    border-radius: 0.5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    padding: 0;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    position: relative;
    line-height: 1.25;
    margin-top: 5px;
    margin-bottom: 5px;
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.pagination .page-link:hover,
.pagination .page-link:focus {
    color: #212529;
    background-color: #E2E6EA;
    border-color: #E2E6EA;
}

.pagination .page-item .active {
    color: #fff;
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}