.at-themes .g-gridContainer__inner.--1col {
    grid-template-columns: 1fr !important; /* because of specific styling from ".variantSidebar .main__content .content .g-gridContainer__inner" */
}

.at-themes__intro {
    margin-block-end: var(--marginMedium);
}

/**
 * Items
 */

.at-themes__itemWrapper.g-gridContainer__inner {
    gap: var(--marginSmallMedium);
}

.at-themes__item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--marginSmall);
    padding: var(--marginSmall);
    border-radius: var(--borderRadiusSmall);
    box-shadow: var(--boxShadow), 0 0 1px 1px rgba(0,0,0,0.1);
    background-color: var(--baseLight100);
    transition: transform .2s ease-out;
}

.at-themes__item:has(.u-coverLink):hover {
    transform: translateY(-.15rem);
    box-shadow: var(--boxShadowHover);
}

.at-themes__titleWrapper {
    display: flex;
    align-items: center;
    gap: var(--marginSmall);
}

.at-themes__title {
    margin: 0;
    font-size: var(--h6Size);
}

.at-themes__titleIcon {
    margin-left: auto;
}

.at-themes__titleIcon::before {
    margin: 0;
    line-height: normal;
}

.at-themes__image {
    display: block;
    aspect-ratio: 1;
    order: -1;
    object-fit: contain;
    width: 1.875rem;
}

.--light .at-themes__itemWrapper:not(.--dark) .at-themes__image,
.at-themes__itemWrapper.--light .at-themes__image {
    filter: invert(1) brightness(1);
}

.at-themes__link {
    margin-top: auto;
    align-self: flex-start;
}

.at-themes__moreLink {
    display: inline-block;
    margin-block-start: var(--marginMedium);
}

/**
 * Transparent items
 */

.at-themes .g-gridContainer__inner.--1col.--transparentItems {
    grid-gap: 0;
    margin-inline: calc(-1 * var(--marginMedium));
}

.--transparentItems .at-themes__item,
.--transparentItems .at-themes__item:has(.u-coverLink):hover {
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.--transparentItems .at-themes__item {
    padding: var(--marginSmall) var(--marginMedium);
}

.--transparentItems .at-themes__item:has(.u-coverLink):hover {
    color: var(--primaryColor500);
    background-color: var(--primaryColor100) !important;
}

.--transparentItems .at-themes__item {
    border-top: 1px solid var(--baseLight350);
}