/* REPOSITORY PANELS */

header [id*="search-stats"] {
    display: block !important;
    margin: 0 !important
}

#start {
    min-height: 50vh;
    margin-top: 1rem
}

#page.drawers [role="main"]:has(#start) {
    position: relative;
    z-index: 1
}

#start > picture {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 50%;
    top: 0;
    filter: brightness(3);
    z-index: -1
}

#start > picture img {
    height: 100%;
}

@media (max-width: 767px) {
    #start > picture {
        left: 0
    }
}

#start .panel {
    width: 100%;
    padding: 4rem;
    border-radius: var(--radiusValue);
    background-color: var(--lightergrey);
    border: 1px solid var(--lightgrey);
    box-shadow: 0.5rem 0.5rem 1rem #0004
}

#start .panel h1 {
    font-size: 1.75rem;
    text-align: center
}

#start .panel form {
    text-align: center
}

#start .panel form :is(label,input) {
    display: block
}

#start .panel form input {
    width: 85%;
    margin: 2rem auto;
    padding: var(--grid-space);
    border-radius: var(--radiusValue);
    border: 2px solid var(--lightgrey);
    color: var(--plain-tx)
}

#start .panel form button {
    display: inline;
    width: 25%
}

#start .panel form button:not(:last-of-type) {
    margin-right: 1rem
}

@media (max-width: 1280px) {
    #start {
        padding: 0;
    }

    #start .panel {
        padding: 1rem;
    }

    #start .panel h1 {
        font-size: 1.5rem;
    }

    #start .panel form input {
        width: 100%;
    }

    #start .panel form button {
        display: block;
        width: 100%
    }

    #start .panel form button:not(:last-of-type) {
        margin-right: 0;
        margin-bottom: 1rem
    }
}

footer > #footer {
    padding: var(--grid-space);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--grid-space);
    border: 5px solid #B3D8E1;
    background-color: white
}

footer > #footer * {
    margin: 0
}

@media (max-width: 1600px) {
    footer > #footer {
        flex-wrap: wrap
    }

    footer > #footer .review {
        order: 3
    }
}

@media (max-width: 1200px) {
    footer > #footer {
        flex-wrap: nowrap
    }

    footer > #footer .review {
        order: unset
    }
}

#related-creator .title {
    color: var(--primary);
    font-weight: 400;
    font-size: 1rem
}

#related-creator .creator {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1
}

#related-creator .published {
    margin-top: var(--grid-space);
    padding: 0.25rem 0.5rem;
    background-color: var(--lightgrey);
    border-radius: var(--radiusValue)
}

#related-creator .published > * {
    display: inline
}

#related-creator .lastupdated {
    margin-top: var(--grid-space);
    padding: 0.25rem 0.5rem;
    background-color: var(--lightgrey);
    border-radius: var(--radiusValue)
}

#related-creator .lastupdated > * {
    display: inline
}

#related-creator :is(.published,.lastupdated) > * {
    font-size: 0.875rem
}

#related-creator picture {
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: clip
}

#related-creator picture img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}

#creator-description {
    padding: 1rem;
    margin-bottom: 2rem;
    background-color: var(--lightergrey);
    border-radius: var(--radiusValue);
}

#creator-description > div.header .left.side {
    flex-grow: 1
}

#creator-description > div.header .left.side picture {
    width: 4rem;
    aspect-ratio: 1/1;
    margin-right: 1rem;
    border-radius: 50%;
    overflow: clip
}

#creator-description > div.header .left.side picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

#creator-description > div.header .left.side h6.title {
    margin: 0;
    color: var(--primary);
    font-weight: 400;
    font-size: 1rem
}

#creator-description > div.header .left.side p.creator {
    margin: 0;
    line-height: 1;
    font-size: 1.5rem;
    font-weight: 700
}

#creator-description > div.header .right.side .followers {
    color: var(--primary);
}

#creator-description > div.header .right.side .followers i {
    font-size: 1.25rem;
}

#collection-description {
    padding: 1rem;
    margin-bottom: 2rem;
    background-color: var(--lightergrey);
    border-radius: var(--radiusValue);
}

#collection-description picture {
    width: 100%;
    overflow: clip;
    border-radius: var(--radiusValue)
}

#collection-description picture img {
    width: 100%;
    max-height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radiusValue)
}

#related-subjects header #search-results {
    display: none
}

#search-tabs {
    #related-subjects header {
        margin-top: var(--grid-space);
        background-color: var(--primary) !important;
        color: white !important
    }

    #related-subjects header h4 {
        display: none !important
    }

    #related-subjects header #search-results {
        display: block !important;
        margin: 0 !important
    }

    #related-subjects header .btn.primary.outline {
        background-color: white !important;
        color: var(--primary) !important
    }
}

#related-subjects .subject.row {
    margin: 0rem;
    padding: var(--grid-space);
    margin-bottom: var(--grid-space)
}

#related-subjects .subject.row > picture {
    width: 100%;
    padding: 0;
    border-radius: var(--radiusValue);
    overflow: clip
}

#related-subjects .subject.row > picture img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#related-subjects div.subjects .more-subjects {
    display: block;
    margin-inline: auto
}

#related-subjects .creator picture {
    width: 2.5rem !important;
    aspect-ratio: 1/1;
    margin-right: 0.5rem;
    border-radius: 50%;
    overflow: clip;
}

#related-subjects .creator picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#related-subjects .creator .title {
    color: var(--primary)
}

#related-collections header #search-results {
    display: none
}

#search-tabs {
    #related-collections header {
        margin-top: var(--grid-space);
        background-color: var(--primary) !important;
        color: white !important
    }

    #related-collections header h4 {
        display: none !important
    }

    #related-collections header #search-results {
        display: block !important;
        margin: 0 !important
    }

    #related-collections header .btn.primary.outline {
        background-color: white !important;
        color: var(--primary) !important
    }
}

#related-collections #collections.row {
    margin-inline: calc(var(--grid-space) / -2);
}

#related-collections #collections.row .collection-info {
    padding: 0
}

#related-collections #collections.row .collection-info .area {
    margin: calc(var(--grid-space) / 2);
}

#related-collections #collections.row .collection-info .area picture {
    display: block;
    width: 100%;
    padding: 0;
    border-radius: var(--radiusValue);
    overflow: clip
}

#related-collections #collections.row .collection-info .area picture img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#related-collections #collections.row .collection-info .area h6.collection-title {
    margin-block: 0.5rem;
    text-align: center;
    font-size: 1.5rem;
}

#related-collections #collections.row .collection-info .iconbutton {
    flex: 1 1 0;
}

#related-collections div.collections .more-subjects {
    display: block;
    margin-inline: auto
}

#asiderelated-collections #collections picture {
    display: block;
    width: 100%;
    border-radius: var(--radiusValue);
    overflow: clip
}

#asiderelated-collections #collections picture > img {
    width: 100%;
    height: 100%
}

#asiderelated-collections #collections .collection-info {
    margin-bottom: calc(var(--grid-space) * 2);
}

#asiderelated-collections #collections .collection-info h6.collection-title {
    margin-block: 0.5rem;
    text-align: center;
    font-size: 1.5rem;
}

#asiderelated-collections #collections .collection-info .iconbutton .faicon {
    font-size: 1.25rem !important;
}

#related-creators header {
    padding: var(--grid-space);
    margin-bottom: var(--grid-space);
    background-color: var(--lightergrey);
    border-radius: var(--radiusValue)
}

#related-creators header #search-results {
    display: none
}

#search-tabs {
    #related-creators header {
        margin-top: var(--grid-space);
        background-color: var(--primary) !important;
        color: white !important
    }

    #related-creators header h4 {
        display: none !important
    }

    #related-creators header #search-results {
        display: block !important;
        margin: 0 !important
    }

    #related-creators header .btn.primary.outline {
        background-color: white !important;
        color: var(--primary) !important
    }
}

#related-creators #creators.row {
    margin-inline: calc(var(--grid-space) / -2);
}

#related-creators #creators.row .creator-info {
    padding: 0 !important;
}

#related-creators #creators.row .creator-info .area {
    margin: calc(var(--grid-space) / 2);
}

#related-creators #creators.row .creator-info .area picture {
    display: block;
    width: 33%;
    aspect-ratio: 1/1;
    padding: 0;
    margin-inline: auto;
    border-radius: 50%;
    overflow: clip
}

#related-creators #creators.row .creator-info .area picture img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#related-creators #creators.row .creator-info .area .title {
    margin: 0;
    margin-top: 1rem;
    line-height: 1;
    text-align: center;
    color: var(--primary)
}

#related-creators #creators.row .creator-info .area .creator-title {
    margin: 0;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    line-height: 1;
    text-align: center;
    font-size: 1.25rem
}

#related-creators div.creators .more-subjects {
    display: block;
    margin-inline: auto
}


#subject {
    #subject-reference h2 {
        font-size: 2.5rem
    }
}

#subject-reference > h2 {
    font-size: 1.5rem;
    line-height: 1;
}

#subject-reference .attribs {
    margin-block: 0.5rem;
    line-height: 2;
}

#subject-reference .attribs .certified {
    margin-block: 1rem;
}

#subject-reference .attribs .certified .pill {
    font-size: 0.875rem;
}

#subject-reference .attribs .properties .pill {
    font-size: 0.875rem;
}

#subject-reference .attribs .classification {
    line-height: 2
}

#subject-reference .attribs .classification .title {
    display: inline;
    font-weight: 600;
    font-size: 0.875rem
}

#subject-reference .attribs .classification .pill {
    font-size: 0.875rem;
}

#subject-reference .attribs .subject {
    line-height: 2
}

#subject-reference .attribs .subject .title {
    display: inline;
    font-weight: 600;
    font-size: 0.875rem
}

#subject-reference .attribs .subject .pill {
    font-size: 0.875rem;
}

#subject-description > picture {
    width: 100%
}

#subject-description > picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

#subject-description > article > h2 {
    font-size: 1.5rem
}

#subject-description > article > p {
    font-size: 1rem;
}

#subject-description > article > p:last-of-type {
    margin-bottom: 0 !important
}

#subject-keywords {
    width: 100%;
    margin: 0;
    line-height: 2;
}

#subject-keywords a.pill.keyword {
    display: inline-block;
    background-color: var(--primary);
    line-height: 1.5;
    font-size: 0.875rem;
    color: #FFF;
    background-color: var(--primary);
}

#subject-features #feature-details h5 {
    margin: 0;
    font-size: 1rem;
}

#subject-features #features h5:first-of-type {
    margin-top: 0;
}

#subject-features #features p {
    font-size: 1rem;
}

#subject-outcomes #outcome-details h5 {
    margin-top: 2rem;
    margin-bottom: 0;
    font-size: 1rem;
}

#subject-outcomes #outcome-details h5:first-of-type {
    margin-top: 0rem;
}

#subject-outcomes #outcome-details p {
    font-size: 1rem;
}

#subject-outcomes #outcome-details hr {
    margin: 0;
}

#subject-evaluate #evaluations {
    margin: var(--grid-space);
}

#subject-evaluate #evaluations button.add-comment {
    margin-left: auto;
    margin-bottom: var(--grid-space);
}

#subject-evaluate #evaluations button.more-comments {
    display: block;
    margin-block: var(--grid-space);
    margin-inline: auto;
    padding: .5em .75rem;
    border: 1px solid #CCC;
    border-radius: var(--radiusValue);
    background-color: transparent;
    font-weight: 600;
    color: var(--plain-tx);
}

#subject-evaluate #evaluations .user:not(:last-of-type) {
    margin-bottom: var(--grid-space);
}

#subject-evaluate #evaluations .user > header {
    margin: 0;
}

#subject-evaluate #evaluations .user > header > picture {
    padding: 0;
    border-radius: 50%;
    overflow: clip
}

#subject-evaluate #evaluations .user > header > picture > img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

#subject-evaluate #evaluations .user > header .username {
    margin: 0;
    font-size: 1.125rem;
    color: var(--primary) !important;
}

#subject-evaluate #evaluations .user > header .timestamp {
    margin: 0;
    font-size: 1rem;
    color: #3D3D3D99 !important;
}

#subject-evaluate #evaluations .user > header .delete-comment {
    position: absolute;
    right: 0;
    top: 0;
}

#subject-evaluate #evaluations .user > .evaluation {
    margin: 0
}

#subject-evaluate #evaluations .user > .evaluation article {
    padding-block: 1rem;
}

#subject-evaluate #evaluations .user > .evaluation article p {
    margin-bottom: 0;
}

#subject-evaluate #evaluations .user > .evaluation article p:last-of-type {
    margin-bottom: 0;
}

#subject-evaluate #evaluations .user > .evaluation .score {
    border-left: 1px solid #0001;
}

#subject-evaluate #evaluations .user > .evaluation .score .row {
    margin-bottom: var(--grid-space) !important;
    line-height: 1;
}

#subject-evaluate #evaluations .user > .evaluation .score .row:last-of-type {
    margin-bottom: 0 !important;
}

#subject-evaluate #evaluations .user > .evaluation .score .row label {
    margin-bottom: 0;
}

#subject-creator .title {
    color: var(--primary);
    font-weight: 400;
    font-size: 1rem
}

#subject-creator .creator {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1
}

#subject-creator .published {
    margin-top: var(--grid-space);
    padding: 0.25rem 0.5rem;
    background-color: var(--lightgrey);
    border-radius: var(--radiusValue)
}

#subject-creator .published > * {
    display: inline
}

#subject-creator .lastupdated {
    margin-top: var(--grid-space);
    padding: 0.25rem 0.5rem;
    background-color: var(--lightgrey);
    border-radius: var(--radiusValue)
}

#subject-creator .lastupdated > * {
    display: inline
}

#subject-creator :is(.published,.lastupdated) > * {
    font-size: 0.875rem
}

#subject-creator picture {
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: clip
}

#subject-creator picture img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
}

#subject-attached .filelink {
    position: relative;
    margin-bottom: var(--grid-space);
    padding: 0.5rem 1rem;
    border-radius: var(--radiusValue);
    background-color: var(--glowblue-bg);
    text-align: left;
    font-size: 1rem;
    color: var(--plain-tx)
}

#subject-attached .filelink i.faicon {
    padding: 0.5rem;
    border: 1px solid;
    border-radius: var(--radiusValue);
    font-size: 1.125rem;
    color: var(--primary)
}
i.faicon {
    font-size: 1.5rem;
    margin-inline: 0.25em !important
}
.eval i {
    color: var(--primary) !important;
}
#subject-attached .filelink span {
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1;
    text-decoration: inherit
}

#subject-attached .filelink:hover span.overflowed {
    position: absolute;
    right: 4rem;
    display: block;
    padding: 0.5rem;
    border-radius: var(--radiusValue);
    box-shadow: -2px 2px 6px #0004;
    background-color: var(--lightgrey);
}

#subjectfield-title {
    padding-block: 2rem;
    text-align: center;
    background-color: var(--lightergrey);
    border-radius: var(--radiusValue)
}

#subjectfield-title label {
    margin: 0;
    line-height: 1;
    font-size: 1.25rem;
    color: #849DD1;
}

#subjectfield-title h1 {
    margin: 0;
    line-height: 1;
    font-size: 2.5rem;
    color: #4164AF
}

#related-subjectfield header {
    padding: var(--grid-space);
    margin-bottom: var(--grid-space);
    background-color: var(--lightergrey);
    border-radius: var(--radiusValue)
}

#related-subjectfield header #search-results {
    display: none
}

#related-subjectfield header {
    margin-top: var(--grid-space);
    background-color: var(--primary) !important;
    color: white !important
}

#related-subjectfield header:not(:first-of-type) {
    margin-top: calc(var(--grid-space) * 2);
}

#related-subjectfield header h4 {
    margin: 0;
    margin-bottom: 0.33rem
}

#related-subjectfield header .btn.primary.outline {
    background-color: white !important;
    color: var(--primary) !important
}

#related-subjectfield .subjectfields-group {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-space)
}

#related-subjectfield .subjectfields-group > .subjectfield {
    flex: 1 1 calc(33% - var(--grid-space));;
    width: calc(50% - var(--grid-space));
}

#related-subjectfield .subjectfields-group > .subjectfield:has(.overflowed) {
    flex: 1 1 calc(50% - var(--grid-space));
}

#related-subjectfield .subjectfields-group > .subjectfield .area {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--radiusValue);
    background-color: var(--lightergrey);
}

#related-subjectfield .subjectfields-group > .subjectfield .area .title {
    margin-bottom: var(--grid-space);
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1;
    white-space: nowrap;
    line-height: 1.15;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--plain-tx)
}

#related-subjectfield .subjectfields-group > .subjectfield .area .title.overflowed {
    white-space: normal !important;
}

#related-subjectfield .subjectfields-group > .subjectfield .area .impact {
    margin-top: auto;
    white-space: nowrap;
}

#related-subjectfield .subjectfields-group > .subjectfield .area .impact > * {
    white-space: nowrap;
}

#related-subjectfield .subjectfields-group > .subjectfield .area .impact span {
    margin: 0 !important;
    padding-inline: 0.5rem;
    color: var(--primary) !important
}

#related-subjectfield .subjectfields-group > .subjectfield .area .impact span:first-of-type {
    padding-left: 0;
}

#related-subjectfield .subjectfields-group > .subjectfield .area .impact span:not(:first-of-type) {
    border-left: 1px solid #0004
}

#related-subjectfield .subjectfields-group > .subjectfield .area .impact.overflowed span {
    display: block;
    border: none !important;
    padding-inline: 0 !important;
}

@media (max-width: 767px) {
    #related-subjectfield .subjectfields-group > .subjectfield {
        flex: 1 0 100% !important;
    }
}

#filter-bar.container {
    margin-inline: calc(-1 * var(--grid-space));
    width: calc(100% + var(--grid-space) * 2.5);
}

#filter-bar form {
    width: 100%;
    margin-inline: auto;
    display: flex;
    align-items: center;
    column-gap: var(--grid-space)
}

#filter-bar #filter-text {
    width: 100%;
    padding: calc(var(--grid-space) / 2);
    border-radius: var(--radiusValue);
    border: 1px solid #8a8a8a;
    outline: none
}

#filter-bar button[type="submit"] {
    white-space: nowrap;
}

#filter-bar button[type="submit"] i.faicon {
    font-size: inherit !important
}

@media (max-width: 767px) {
    #filter-bar button span {
        display: none
    }
}

#filter-details {
    border: none;
}

#filter-details .blocktitle {
    color: var(--plain-tx)
}

#filter-details > button {
    background-color: transparent !important;
}

#filter-details > #details {
    margin: 0 !important
}

#filter-details > #details > #clear-all-filters {
    width: 100%
}

#filter-details > #details > label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-block: calc(var(--grid-space) * 2);
    line-height: 1;
    font-weight: 600;
}

#filter-details > #details > label > .filter-option {
    display: block;
    width: 100%;
    padding: calc(var(--grid-space) / 2);
    border: none;
    outline: none;
    border-radius: var(--radiusValue)
}

#search-tabs ul[role="tablist"] {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    column-gap: 1rem;
    justify-content: center;
    border-bottom: 1px solid #0003;
}

#search-tabs ul[role="tablist"] > li.nav-item:hover,
#search-tabs ul[role="tablist"] > li.nav-item > .nav-link {
    height: unset;
    box-shadow: none;
    border: none;
    color: #3d3d3d
}

#search-tabs ul[role="tablist"] > li.nav-item > .nav-link:hover,
#search-tabs ul[role="tablist"] > li.nav-item > .nav-link.active {
    background-color: unset;
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
}

#search-tabs ul[role="tablist"] > li.nav-item > .nav-link.active {
    cursor: default;
    pointer-events: none
}

@media (max-width: 767px) {
    #search-tabs ul[role="tablist"] {
        flex-direction: column;
        background-color: white;
        margin-top: calc(var(--grid-space) * 2)
    }

    #search-tabs ul[role="tablist"] > li.nav-item {
        background-color: none;
    }

    #search-tabs ul[role="tablist"] > li.nav-item > .nav-link {
        width: 100%;
        border-radius: none;
        border-top-left-radius: var(--radiusValue);
        border-top-right-radius: var(--radiusValue);
    }

    #search-tabs ul[role="tablist"] > li.nav-item > .nav-link {
        border: none !important;
        background-color: #FFF !important
    }

    #search-tabs ul[role="tablist"] > li.nav-item > .nav-link:not(.active) {
        padding-block: 1.5rem;
        margin-bottom: -8px;
        border: 1px solid var(--lightgrey) !important;
        box-shadow: inset 0 -4px 10px 0px #0001;
    }

    #search-tabs ul[role="tablist"] > li.nav-item > .nav-link.active {
        font-weight: 700
    }

    #search-tabs ul[role="tablist"] > li.nav-item:has(.nav-link.active) {
        order: 100;
        margin-top: calc(var(--grid-space) * 4);
        font-size: 125%
    }
}
.star-rating input{
    display:hidden;
}
/* GROUP AREA ********************/
.group {
    padding: 0 !important
}

.group > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--grid-space);
    background-color: var(--primary)!important;
    border-radius: var(--radiusValue);
    color: white
}

.group > header * {
    margin: 0
}

.group > header .flank {
    flex: 1 1 33%;
}

.group > header .left.flank {
    text-align: left;
}

.group > header .mid.flank {
    text-align: center;
}

.group > header .right.flank {
    text-align: right;
}

.group > header .title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.group > header .subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1;
}

.group > header .stats {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1;
}

.group > header .dropdown-toggle {
    padding: 0.4rem 1rem;
    background-color: white !important;
    border: none;
    border-radius: var(--radiusValue);
    color: var(--primary) !important
}

.group > .details {
    margin-block: var(--grid-space)
}

.group.block > .details {
    display: block
}

.group.block > .details .item {
    display: flex;
    gap: var(--grid-space)
}

.group.block > .details .item:not(:last-of-type) {
    margin-bottom: var(--grid-space);
}

.group.block > .details .item > picture {
    margin-right: var(--grid-space);
}

.group.block > .details .item > picture > img {
    width: 100%;
    height: 100%;
    border-radius: var(--radiusValue);
    object-fit: cover;
}

.group.block > .details .btn {
    margin-inline: auto;
    line-height: 1
}

@media (max-width: 768px) {
    .group.block > .details .item {
        flex-direction: column
    }

    .group.block > .details .item > picture {
        flex: 0 0 100%;
        margin-right: 0;
    }
}

.group.grid > .details {
    margin-top: var(--grid-space);
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-space)
}

.group.grid.col3 > .details .item.area {
    padding: 0 !important;
    position: relative !important
}

.group.grid.col3 > .details .item {
    flex: 0 0 calc(33.3333333% - var(--grid-space) * 0.666666);
}

.group.grid.col2 > .details .item {
    flex: 0 0 calc(50% - var(--grid-space) * 0.5);
}

.group.grid > .details .item {
    flex: 0 0 calc(100%);
}

.group.grid > .details .item > picture {
    display: block;
}

.group.grid > .details .item > picture > img {
    width: 100%;
    aspect-ratio: 3/2;
    border-radius: var(--radiusValue) var(--radiusValue) 0 0;
    object-fit: cover;
}

.group.grid > .details .item > .name {
    margin-block: 0.5rem;
    text-align: center;
    font-size: 1.25rem
}

.group.grid > .details .btn {
    width: 100%;
    margin-inline: 33.3333%;
    padding-block: var(--grid-space);
    line-height: 1
}

@media (max-width: 992px) {
    .group > header {
        flex-direction: column
    }

    .group > header :is(.left.flank,.mid.flank,.right.flank) {
        text-align: center
    }

    .group.grid.col3 > .details .item {
        flex: 0 0 calc(50% - var(--grid-space) * 0.5);
    }

    .group.grid > .details .btn {
        width: 100%;
        margin-inline: 25%;
    }
}

@media (max-width: 768px) {
    .group.grid.col3 > .details .item,
    .group.grid.col2 > .details .item {
        flex: 0 0 100%;
    }

    .group.grid > .details .btn {
        width: 100%;
        margin-inline: 0
    }
}

.group.w-asym > .details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-space);
}

.group.w-asym > .details .item {
    width: calc(50% - var(--grid-space));
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(33% - var(--grid-space));
}

.group.w-asym > .details .item:has(.title.overflowed) {
    flex: 1 1 calc(50% - var(--grid-space));
}

.group.w-asym > .details :is(.title,.subtitle) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.group.w-asym > .details :is(.title,.subtitle).overflowed {
    white-space: normal !important;
}

.group.w-asym > .details .btn {
    width: 100%;
    margin-inline: 33.3333%;
    line-height: 1
}

@media (max-width: 768px) {
    .group.w-asym > .details .btn {
        width: 100%;
        margin-inline: 0
    }
}

/* Comments rating stars */

.star-rating input {
    display: none;
}

.mform .star-rating label.fitem {
    font-size: 2rem;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-right: 0 !important;
    padding-top: 8px !important;
}

.star-rating label i {
    color: var(--primary);
    font-size: 1rem !important;
    margin-inline: 0rem !important;
}
#breadcrumbs > .breadcrumb:not(.active)::after {
    content: "\f054";
    font-family: 'Font Awesome 6 Free';
    margin-left: 0.25rem;
    font-size: 75%;
}