.section-trainings {
    width: 100%;
    box-sizing: border-box;
}

.section-trainings__inner {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.trainings-course-list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.trainings-course {
    border: 1px solid #d9e4e9;
    border-radius: 8px;
    background: #fff;
    overflow-wrap: anywhere;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.trainings-course a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 14px 18px;
    border-radius: inherit;
    color: #006068;
    font-weight: 600;
    text-decoration: none;
}

.trainings-course__name {
    flex: 1;
    min-width: 0;
}

.trainings-course a::after {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.trainings-course:has(a:hover),
.trainings-course:has(a:focus-visible) {
    border-color: #006068;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.trainings-course a:hover,
.trainings-course a:focus-visible {
    background: #eef6f6;
    color: #006068;
    text-decoration: none;
}

.trainings-course a:focus-visible {
    outline: 2px solid #006068;
    outline-offset: 3px;
}

.trainings-course:not(:has(a)) {
    padding: 14px 18px;
}

.trainings-course--booked {
    color: #666;
    background: #f8f8f8;
}