.courses-list {
    display: grid;
    gap: var(--common-gap);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.courses-list--carousel {
    grid-template-columns: none;
}

.courses-list__item {
    cursor: pointer;
    position: relative;
}

.course-card__box-icon {
    display: none;
}

.page-view__course-card .course-card__box-icon,
.profile-course.profile-course--link .course-card__box-icon {
    position: absolute;
    right: var(--size-base);
    bottom: var(--size-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc((var(--size-mid) + var(--size-md)) / 2);
    height: calc((var(--size-mid) + var(--size-md)) / 2);
    color: var(--color-text);
    pointer-events: none;
}

.page-view__course-card .course-card__box-icon svg,
.profile-course.profile-course--link .course-card__box-icon svg {
    width: 100%;
    height: 100%;
}

.courses-list__item:hover,
.courses-list__item:focus-visible {
    outline: none;
}

.courses-list__item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

.courses-list__price {
    font-weight: 600;
    color: var(--color-accent, var(--color-primary));
    font-size: 1rem;
}

.courses-list__price-block {
    display: inline-flex;
    gap: var(--size-xs);
}

.courses-list__price--current {
    color: var(--color-accent, var(--color-primary));
}

.courses-list__price--original {
    color: var(--color-secondary);
    text-decoration: line-through;
    font-weight: 300;
    font-size: 0.8rem;
    height: 100%;
}

.courses-list__topics {
    margin: 0;
    padding: 0;
    gap: var(--size-xs);
}

.courses-list__meta-item,
.courses-list__duration {
    display: inline-flex;
    align-items: center;
    gap: var(--size-xs);
    white-space: nowrap;
}

.courses-list__duration {
    font-variant-numeric: tabular-nums;
}

.courses-list__empty {
    color: var(--color-secondary);
    font-size: var(--font-size-base);
}

.courses-list__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-sm);
    margin-top: var(--size-lg);
}

.courses-list__see-all {
    margin-right: auto;
}

.courses-list__see-all-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
}

.page-view__section--catalog.page-view__section--variation-highlighted .courses-list__item {
    box-shadow: 0 0 0 1px var(--color-primary);
    border-radius: var(--radius-card);
}