.resources {
    .resource {
        --transition-duration : 0.2s;

        transition            : transform var(--transition-duration) ease-in-out,
        box-shadow var(--transition-duration) ease-in-out,
        border-color var(--transition-duration) ease-in-out;

        border-radius         : calc(var(--var-panel-border-radius) - var(--resources-padding));
        border                : 1px solid var(--color-grey-light);
        position              : relative;

        .sdm_download_item {
            margin                : 0;
            padding               : 2rem;
            border                : none;
            box-shadow            : none;

            display               : grid;
            grid-template-columns : 1fr min-content min-content;
            align-items           : center;
            column-gap            : 2rem;
        }

        .sdm_download_title {
            font                  : var(--font-rsc-title);
            font-feature-settings : var(--font-features);
            grid-area             : 1 / 1;
            display               : flex;
            align-items           : center;
            gap                   : 1rem;
            flex-wrap             : wrap;
        }

        .sdm_download_description {
            display : none;

            p {
                font                  : var(--font-small);
                font-feature-settings : var(--font-features);
            }
        }

        .sdm_download_link {
            grid-area : 1 / 3;
        }

        .sdm_download_button {

            .sdm_download.white {

                --size          : 40px;

                height          : var(--size);
                width           : var(--size);
                display         : flex;
                justify-content : center;
                align-items     : center;
                flex-shrink     : 0;
                border-radius   : 100%;
                padding         : 1rem;
                margin          : 0;
                background      : var(--color-grey-light-bright) none;
                color           : var(--color-grey-black) !important;
                border          : none;
                box-shadow      : none;

                transition      : background-color 0.1s ease-in-out, color 0.1s ease-in;
            }

            .sdm_download.white:hover {
                background-color : black;
                color            : white !important;
            }
        }

        .sdm_clear_float, .sdm_pagination {
            display : none;
        }

        .resource-tag-container {
            grid-area : 1 / 2;
        }

        .resource-tag {
            --type-tag-offset     : var(--resources-padding);
            --tag-height          : 24px;

            font                  : var(--font-tag-label);
            font-feature-settings : var(--font-features);
            text-wrap             : nowrap;
            user-select           : none;

            width                 : min-content;
            height                : var(--tag-height);

            padding-inline        : 1.2rem;
            border-radius         : calc(var(--tag-height) / 2);
            background-color      : var(--color-grey-light-bright);
            align-content         : center;
        }

        .client-only-badge {
            font                  : var(--font-badge);
            font-feature-settings : var(--font-features);
            /*letter-spacing        : -0.02rem;*/
            padding-inline        : 0.5rem;
            padding-block         : 0.25rem;
            border-radius         : 4px;
            border                : 1px solid var(--color-itp-blue);
            margin-block          : auto;
            /*background-color      : var(--color-grey-light);*/
            color                 : var(--color-itp-blue);
            width                 : min-content;
            text-wrap             : nowrap;
        }
    }

    .resource:hover {
        border-color : var(--color-grey-medium);
        transform    : scaleX(1.005) scaleY(1.01);
        box-shadow   : 0 2px 24px -4px rgba(0, 0, 0, 0.1);
    }

    .resource:hover .sdm_download_button .sdm_download.white:not(:hover):not(:active) {
        background-color : var(--color-grey-light);
    }
}

@media (max-width : 512px) {
    .resources {
        .resource {
            .sdm_download_item {
                column-gap : 1rem;
                padding    : 1rem;
            }

            .sdm_download_title {
                font-size : 1.6rem;
            }
        }
    }
}