plural-custom-list {
    box-sizing: border-box;
    display: grid;
}

plural-custom-list {
    --grid-column-gutter: 1rem;
    --grid-row-gutter: 1rem;
    /* Fluid grid */
    /* Expand content as much as possible */
    --grid-container-width: calc(100% - 2 * var(--grid-column-gutter));
    /* fluid column width */
    --grid-column-width: calc(
    (var(--grid-container-width) - (var(--grid-column-gutter) * 11)) / 12
    );
    /* Columns widths */
    --grid-1-columns-width: calc(
    var(--grid-column-gutter) * 0 + var(--grid-column-width) * 1
    );
    --grid-2-columns-width: calc(
    var(--grid-column-gutter) * 1 + var(--grid-column-width) * 2
    );
    --grid-3-columns-width: calc(
    var(--grid-column-gutter) * 2 + var(--grid-column-width) * 3
    );
    --grid-4-columns-width: calc(
    var(--grid-column-gutter) * 3 + var(--grid-column-width) * 4
    );
    --grid-5-columns-width: calc(
    var(--grid-column-gutter) * 4 + var(--grid-column-width) * 5
    );
    --grid-6-columns-width: calc(
    var(--grid-column-gutter) * 5 + var(--grid-column-width) * 6
    );
    --grid-7-columns-width: calc(
    var(--grid-column-gutter) * 6 + var(--grid-column-width) * 7
    );
    --grid-8-columns-width: calc(
    var(--grid-column-gutter) * 7 + var(--grid-column-width) * 8
    );
    --grid-9-columns-width: calc(
    var(--grid-column-gutter) * 8 + var(--grid-column-width) * 9
    );
    --grid-10-columns-width: calc(
    var(--grid-column-gutter) * 9 + var(--grid-column-width) * 10
    );
    --grid-11-columns-width: calc(
    var(--grid-column-gutter) * 10 + var(--grid-column-width) * 11
    );
    --grid-12-columns-width: calc(
    var(--grid-column-gutter) * 11 + var(--grid-column-width) * 12
    );
}

@media (min-width: 64rem) {
    plural-custom-list {
    --grid-container-width: var(--grid-12-columns-width);
    --grid-column-width: 4.25rem; /* 68px */
    }
}

@media (min-width: 90rem) {
    plural-custom-list {
    --grid-column-width: 6.25rem; /* 100px */
    }
}

@media (min-width: 120rem) {
    plural-custom-list {
    --grid-column-width: 6.25rem; /* 100px */
    }
}

plural-custom-list.bg-primary-color {
    background: var(--primary-color-contrast);
}

plural-custom-list.bg-neutral-color {
    background: var(--neutral-color-low-contrast);
}

plural-custom-list .plural-custom-list-container {
    margin: 0 auto; 
    width: var(--grid-container-width, 100%);
}

plural-custom-list .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 0px;
}

plural-custom-list .list-option {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: var(--container-size-stack-small) 1rem;
}

plural-custom-list .spacing-xlarge {
    padding: var(--container-size-inset-xlarge) 0;
}

plural-custom-list .spacing-large { 
    padding: var(--container-size-inset-large) 0;
}

plural-custom-list .spacing-medium { 
    padding: var(--container-size-inset-medium) 0;
}

plural-custom-list .info-container.c12 { 
    grid-column-start: 1; 
    grid-column-end: 9;
}

plural-custom-list .info-container.c10 { 
    grid-column-start: 2; 
    grid-column-end: 10;
}

plural-custom-list .info-container.c08 { 
    grid-column-start: 3; 
    grid-column-end: 11;
}

plural-custom-list .info-container.center { 
    grid-column-start: 3; 
    grid-column-end: 11;
}

plural-custom-list .grid-option { 
    margin-bottom: 3rem;
}

plural-custom-list .grid-option.c12 { 
    grid-column-start: 1; 
    grid-column-end: none;
}

plural-custom-list .grid-option.c10 { 
    grid-column-start: 2; 
    grid-column-end: 12;
}

plural-custom-list .grid-option.c08 { 
    grid-column-start: 3; 
    grid-column-end: 11;
}

plural-custom-list .list-option.center { 
    justify-content: center; 
}

plural-custom-list .info-container {
    width: 100%;
    margin-bottom:var(--container-size-stack-small);
}

plural-custom-list .info-container.center {
    text-align: center;
}

plural-custom-list .info-container .title h1, 
plural-custom-list .info-container .title h2,
plural-custom-list .info-container .title h3, 
plural-custom-list .info-container .title h4, 
plural-custom-list .info-container .title h5, 
plural-custom-list .info-container .title h6, 
plural-custom-list .info-container .title p{
    font-weight: var(--display-weight-font-small);
    font-size: var(--display-size-font-small);
    line-height: var(--display-size-line-height-small);
    font-family: var(--display-family-font-small);
    font-style: var(--display-style-font-small);
    margin-bottom: var(--content-size-stack-medium);
    color: var(--primary-color);
    margin-top: 0px;
}

plural-custom-list .info-container .title.medium p{
    font-weight: var(--title-weight-font-medium);
    font-size: var(--title-size-font-medium);
    line-height: var(--title-size-line-height-medium);
    font-family: var(--title-family-font-medium);
    font-style: var(--title-style-font-medium);
}
  
plural-custom-list .info-container .title.large p{
    font-weight: var(--title-weight-font-large);
    font-size: var(--title-size-font-large);
    line-height: var(--title-size-line-height-large);
    font-family: var(--title-family-font-large);
    font-style: var(--title-style-font-large);
}
  

plural-custom-list .info-container .title strong{
    font-family: var(--display-family-font-small) !important;
}

plural-custom-list .info-container .subtitle h1, 
plural-custom-list .info-container .subtitle h2, 
plural-custom-list .info-container .subtitle h3, 
plural-custom-list .info-container .subtitle h4, 
plural-custom-list .info-container .subtitle h5, 
plural-custom-list .info-container .subtitle h6, 
plural-custom-list .info-container .subtitle p{
    font-weight: var(--title-weight-font-medium);
    font-size: var(--title-size-font-medium);
    line-height: var(--title-size-line-height-medium);
    font-family: var(--title-family-font-medium);
    font-style: var(--title-style-font-medium);
    margin-bottom: var(--content-size-stack-medium);
    color: var(--primary-color);
    margin-top: 0px;
}

plural-custom-list .info-container .subtitle strong{
    font-family: var(--title-family-font-medium) !important;
}

plural-custom-list .info-container .paragraph p, 
plural-custom-list .info-container .paragraph h1, 
plural-custom-list .info-container .paragraph h2, 
plural-custom-list .info-container .paragraph h3, 
plural-custom-list .info-container .paragraph h4, 
plural-custom-list .info-container .paragraph h5, 
plural-custom-list .info-container .paragraph h6{
    font-weight: var(--body-weight-font-large);
    font-size: var(--body-size-font-large);
    line-height: var(--body-size-line-height-large);
    font-family: var(--body-family-font-large);
    font-style: var(--body-style-font-large);
    margin-bottom: var(--content-size-stack-medium);
    color: var(--primary-color);
    margin-top: 0px;
}

plural-custom-list .info-container .paragraph strong{
    font-family: var(--body-family-font-large) !important;
}

plural-custom-list .info-container .font-display-large h1, 
plural-custom-list .info-container .font-display-large h2, 
plural-custom-list .info-container .font-display-large h3,
plural-custom-list .info-container .font-display-large h4, 
plural-custom-list .info-container .font-display-large h5, 
plural-custom-list .info-container .font-display-large h6, 
plural-custom-list .info-container .font-display-large p{
    font-size: var(--display-size-font-large) !important;
    line-height: var(--display-size-line-height-large) !important;
}

plural-custom-list .info-container .font-display-small h1, 
plural-custom-list .info-container .font-display-small h2, 
plural-custom-list .info-container .font-display-small h3, 
plural-custom-list .info-container .font-display-small h4, 
plural-custom-list .info-container .font-display-small h5, 
plural-custom-list .info-container .font-display-small h6, 
plural-custom-list .info-container .font-display-small p{
    font-size: var(--display-size-font-small) !important;
    line-height: var(--display-size-line-height-small) !important;
}

plural-custom-list .info-container .font-title-large h1, 
plural-custom-list .info-container .font-title-large h2, 
plural-custom-list .info-container .font-title-large h3, 
plural-custom-list .info-container .font-title-large h4, 
plural-custom-list .info-container .font-title-large h5, 
plural-custom-list .info-container .font-title-large h6, 
plural-custom-list .info-container .font-title-large p{
    font-size: var(--title-size-font-large) !important;
    line-height: var(--title-size-line-height-large) !important;
}

plural-custom-list .info-container .font-title-medium h1, 
plural-custom-list .info-container .font-title-medium h2, 
plural-custom-list .info-container .font-title-medium h3, 
plural-custom-list .info-container .font-title-medium h4, 
plural-custom-list .info-container .font-title-medium h5, 
plural-custom-list .info-container .font-title-medium h6, 
plural-custom-list .info-container .font-title-medium p{
    font-size: var(--title-size-font-medium) !important;
    line-height: var(--title-size-line-height-medium) !important;
}

plural-custom-list .info-container .accent {
    color: var(--accent-color) !important;
}

plural-custom-list .info-container strong {
    font-weight: bold !important;
}

plural-custom-list .info-container .accent strong {
    font-weight: 800 !important;
}

plural-custom-list .info-container a{
    display: inline-block;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-contrast);
    font-weight: var(--body-weight-font-medium);
    font-size: var(--body-size-font-medium);
    line-height: var(--body-size-line-height-medium);
    font-family: var(--body-family-font-medium);
    font-style: var(--body-style-font-medium);
    text-decoration: none;
    border-radius: calc(1.25rem);
    border-style: solid;
    border-width: 0rem;
    padding: 0 var(--content-size-inline-medium);
    height: 2.5rem;
    box-sizing: border-box;
    fill: var(--accent-color);
    vertical-align: baseline;
}

plural-custom-list .info-container a::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

plural-custom-list .info-container a:hover{
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
    color: var(--primary-color-hover-contrast);
    text-decoration: none;
}

plural-custom-list .list-option.one-columns .item { 
    width: 100%;
}

plural-custom-list .list-option.two-columns .item { 
    width: calc(50% - 8px);
}

plural-custom-list .list-option.three-columns .item { 
    width: calc(33.2% - 10px); 
}

plural-custom-list .list-option.four-columns .item { 
    width: calc(25% - 12px);
}

plural-custom-list .plural-custom-list-container .download-filter-tabs {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: var(--container-size-inset-large);
}

plural-custom-list .plural-custom-list-container .download-filter-tabs .filter{
    margin-right: var(--content-size-inline-medium);
    border-style: none none solid none;
    border-color: #ffffff00;
    border-width: 0rem 0rem 0.125rem 0rem;
}

plural-custom-list .plural-custom-list-container .download-filter-tabs .filter:hover{
    border-color: var(--surface-1-color-active-contrast);
    cursor: pointer;
}

plural-custom-list .plural-custom-list-container .download-filter-tabs .filter.active{
    font-weight: bold;
    color: var(--surface-1-color-active-contrast);
    border-color: var(--surface-1-color-active-contrast);
}

plural-custom-list .plural-custom-list-container .download-filter-tabs .filter p {
    color: var(--surface-1-color-contrast);
    font-weight: var(--body-weight-font-medium);
    font-size: var(--body-size-font-medium);
    line-height: var(--body-size-line-height-medium);
    font-family: var(--body-family-font-medium);
    font-style: var(--body-style-font-medium);
    margin: 0px;
}

plural-custom-list .plural-custom-list-container .download-filter-tabs .filter.active p {
    font-weight: bold;
    color: var(--surface-1-color-active-contrast);
}

plural-custom-list .plural-custom-list-container .item.download-list-item.fluid {
    width: 100% !important;
}

@media (max-width: 1440px) {
    plural-custom-list .plural-custom-list-container {
        margin: 0 auto; 
        max-width: 992px;
    }

    plural-custom-list .plural-custom-list-container .grid-option.c08 .item.download-list-item {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    plural-custom-list .list-option.three-columns .item { 
        width: calc(50% - 8px); 
    }
    plural-custom-list .list-option.four-columns .item {
        width: calc(50% - 8px);
    }
}

@media (max-width: 640px) {

    plural-custom-list .grid-option.c12 { 
        grid-column-start: 1; 
        grid-column-end: none;
    }

    plural-custom-list .grid-option.c10 { 
        grid-column-start: 1; 
        grid-column-end: none;
    }

    plural-custom-list .grid-option.c08 { 
        grid-column-start: 1; 
        grid-column-end: none;
    }

    plural-custom-list .list-option.one-columns .item { 
        width: 100%;
    }

    plural-custom-list .list-option.two-columns .item { 
        width: 100%;
    }

    plural-custom-list .list-option.three-columns .item { 
        width: 100%; 
    }

    plural-custom-list .list-option.four-columns .item { 
        width: 100%;
    }

}