.CPC-ResourcesDownload-cmpnt > .cpc-content {
    overflow: hidden;
}

.CPC-ResourcesDownload-cmpnt .artifacts {
    display: grid;
    gap: 1rem;
    align-items: stretch;
    transition: transform 500ms ease;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    grid-auto-columns: calc(100% + 1rem);
    width: calc(100% - 1rem);
}

/* 2 COLUMN LAYOUT */
.CPC-ResourcesDownload-cmpnt[data-columns="2"] .artifacts {
    grid-template-rows: repeat(3, auto);
    grid-auto-columns: calc(100% / 2);
}

.CPC-ResourcesDownload-cmpnt .artifact {
    --current-text-color: var(--global-text-color);
    --current-link-color: var(--global-link-color);
    --current-link-color-hover: var(--global-link-color-hover);
    background-color: var(--current-surface-card);
    overflow-y: hidden;
    display: grid;
    grid-template-areas:
        "image label"
        "image title"
        "image description";
    grid-template-columns: 8rem 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 2rem;
    padding: 1.2rem;
    transition: opacity 1s ease;
    opacity: 0;
}

.CPC-ResourcesDownload-cmpnt.animate .artifact {
    animation-name: slidein;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

    .CPC-ResourcesDownload-cmpnt.animate .artifact:nth-child(1) {
        animation-delay: .30s
    }

    .CPC-ResourcesDownload-cmpnt.animate .artifact:nth-child(2) {
        animation-delay: .40s;
    }

    .CPC-ResourcesDownload-cmpnt.animate .artifact:nth-child(3) {
        animation-delay: .50s;
    }

    .CPC-ResourcesDownload-cmpnt.animate .artifact:nth-child(4) {
        animation-delay: 0.60s;
    }

    .CPC-ResourcesDownload-cmpnt.animate .artifact:nth-child(5) {
        animation-delay: 0.70s;
    }

    .CPC-ResourcesDownload-cmpnt.animate .artifact:nth-child(6) {
        animation-delay: 0.80s;
    }

.CPC-ResourcesDownload-cmpnt.animate[data-columns="2"] .artifact:nth-child(1) {
    animation-delay: .15s
}

.CPC-ResourcesDownload-cmpnt.animate[data-columns="2"] :is(.artifact:nth-child(2),.artifact:nth-child(4)) {
    animation-delay: .30s;
}

.CPC-ResourcesDownload-cmpnt.animate[data-columns="2"] :is(.artifact:nth-child(3),.artifact:nth-child(5)) {
    animation-delay: .45s;
}

.CPC-ResourcesDownload-cmpnt.animate[data-columns="2"] :is(.artifact:nth-child(6)) {
    animation-delay: 0.60s;
}

@media(prefers-reduced-motion) {
    .CPC-ResourcesDownload-cmpnt .artifact {
        transition: none;
    }
}

@keyframes slidein {
    from {
        transform: translateY(-3rem);
        opacity: 0;
    }

    to {
        transform: translate(0);
        opacity: 1;
    }
}

@keyframes opacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.CPC-ResourcesDownload-cmpnt .artifact a {
    text-decoration: none !important;
    cursor: pointer;
}

.CPC-ResourcesDownload-cmpnt[data-displayImages="False"] .artifact {
    grid-template-columns: auto 1fr;
    column-gap: 0;
}

.CPC-ResourcesDownload-cmpnt .artifact .image-link {
    grid-area: image;
}

.CPC-ResourcesDownload-cmpnt .artifact .preview {
    object-fit: contain;
    max-width: 100%;
    height: 5rem;
    justify-self: center;
}

.CPC-ResourcesDownload-cmpnt .artifact .top-label {
    grid-area: label;
    color: var(--grey, #7E8081);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.CPC-ResourcesDownload-cmpnt .artifact .title {
    grid-area: title;
    margin: 4px 0 10px;
    font-size: 1.3rem;
    font-weight: bold;
}

.CPC-ResourcesDownload-cmpnt .artifact .description-wrapper {
    grid-area: description;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 400ms ease-out;
}

.CPC-ResourcesDownload-cmpnt :is(.artifact:hover, .artifact:focus) .description-wrapper {
    grid-template-rows: 1fr;
}

.CPC-ResourcesDownload-cmpnt .artifact .description {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.7rem;
    overflow: hidden;
    opacity: 0;
    transition: opacity 250ms ease;
}

.CPC-ResourcesDownload-cmpnt .artifact:hover .description,
.CPC-ResourcesDownload-cmpnt .artifact:focus .description {
    opacity: 1;
}

@media (hover: none) {
    .CPC-ResourcesDownload-cmpnt .artifact .description-wrapper {
        grid-template-rows: 1fr;
    }

    .CPC-ResourcesDownload-cmpnt .artifact .description {
        position: relative !important;
        opacity: 1;
    }
}

@media screen and (max-width: 1024px) {
    .CPC-ResourcesDownload-cmpnt:not([data-columns="2"]) .artifacts {
        grid-template-columns: 1fr !important;
    }

    .CPC-ResourcesDownload-cmpnt[data-columns="2"] .artifacts {
        grid-template-rows: repeat(6, auto);
    }

    .CPC-ResourcesDownload-cmpnt[data-columns="2"] .artifact {
        grid-column: span 2;
    }
}

@media screen and (max-width: 550px) {
    .CPC-ResourcesDownload-cmpnt .artifact {
        grid-template-areas:
            "image"
            "label"
            "title"
            "description";
        grid-template-columns: 1fr;
    }

        .CPC-ResourcesDownload-cmpnt .artifact .preview {
            height: unset;
            padding-bottom: 1rem;
        }

        .CPC-ResourcesDownload-cmpnt .artifact .description {
            position: relative !important;
            opacity: 1;
        }
}

.CPC-ResourcesDownload-cmpnt .pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

    .CPC-ResourcesDownload-cmpnt .pagination li {
        line-height: 0;
    }

    .CPC-ResourcesDownload-cmpnt .pagination button {
        height: 2.5rem;
        aspect-ratio: 1/1;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
    }

        .CPC-ResourcesDownload-cmpnt .pagination button:not([disabled]):hover {
            background-color: var(--current-hover-state-color);
            color: white;
        }

    .CPC-ResourcesDownload-cmpnt .pagination :is(button.swipeLeft, button.swipeRight) {
        background-color: var(--current-primary-accent-color);
        color: white;
    }

        .CPC-ResourcesDownload-cmpnt .pagination :is(button.swipeLeft, button.swipeRight)[disabled] {
            background-color: var(--blue-grey);
            cursor: default
        }

    .CPC-ResourcesDownload-cmpnt .pagination button.swipeLeft {
        background-image: url(/portals/0/library/icons/arrow-left/arrow-left-white.svg);
    }

    .CPC-ResourcesDownload-cmpnt .pagination button.swipeRight {
        background-image: url(/portals/0/library/icons/arrow-right/arrow-right-white.svg);
    }

    .CPC-ResourcesDownload-cmpnt .pagination .page-numbers {
        list-style: none;
        display: flex;
        gap: 0.4rem;
        margin: 0;
        padding: 0;
    }

    .CPC-ResourcesDownload-cmpnt .pagination ol button {
        font-size: 1rem;
        font-weight: bold;
    }

        .CPC-ResourcesDownload-cmpnt .pagination ol button:not([disabled]) {
            background-color: var(--current-surface-card);
            color: var(--dk-grey);
        }

    .CPC-ResourcesDownload-cmpnt .pagination .page-numbers button[disabled] {
        background-color: var(--blue-grey);
        color: white;
    }