.classes-hero {
    position: relative;
    min-height: 355px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(2, 5, 7, .98) 0%, rgba(2, 5, 7, .82) 40%, rgba(2, 5, 7, .18) 100%),
        url('/dist/images/gym/classes-hero.png') center/cover no-repeat;
}

.classes-hero__content { position: relative; z-index: 1; }
.classes-hero h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 900;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.classes-breadcrumb { display: flex; align-items: center; gap: 14px; font-size: 15px; }
.classes-breadcrumb a { color: #fff; text-decoration: none; }
.classes-breadcrumb span, .classes-breadcrumb strong { color: #ff6600; }
.classes-hero p { margin: 28px 0 0; color: #f1f1f1; font-size: 17px; line-height: 1.65; }

.classes-page { padding: 46px 0 58px; background: #fff; }
.classes-list { display: grid; gap: 14px; }

.class-card {
    min-height: 200px;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 170px;
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 6px;
    background: #fff;
    color: #111;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.class-card:hover {
    color: #111;
    text-decoration: none;
    transform: translateY(-2px);
    border-color: #ff6600;
    box-shadow: 0 12px 32px rgba(12, 16, 18, .09);
}

.class-card__media { min-height: 200px; overflow: hidden; background: #111; }
.class-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.class-card:hover .class-card__media img { transform: scale(1.035); }

.class-card__content { padding: 38px 44px; display: flex; flex-direction: column; justify-content: center; }
.class-card__content { min-width: 0; }
.class-card__content h2 { margin: 0 0 8px; color: #111; font-size: 26px; font-weight: 900; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; }
.class-card__content h3 { margin: 0 0 14px; color: #ff6600; font-size: 15px; font-weight: 800; line-height: 1.35; }
.class-card__content p { max-width: 440px; margin: 0; color: #303030; font-size: 16px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }

.class-card__facts { padding: 24px 22px; display:flex; flex-direction:column; justify-content:center; gap:15px; border-left:1px solid #eee; background:#fafafa; }
.class-card__facts>div { min-width:0; display:grid; grid-template-columns:25px minmax(0,1fr); gap:10px; align-items:center; }
.class-card__facts i { color:#ff6600; font-size:19px; text-align:center; }
.class-card__facts span { min-width:0; display:flex; flex-direction:column; }
.class-card__facts strong { color:#111; font-size:15px; line-height:1.25; overflow-wrap:anywhere; }
.class-card__facts small { margin-top:3px; color:#666; font-size:10px; line-height:1.25; text-transform:uppercase; }

.classes-benefits {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 8px;
    background: linear-gradient(135deg, #f7f7f7, #efefef);
}

.classes-benefits article { min-width: 0; min-height: 122px; padding: 25px 28px; display: flex; align-items: center; gap: 20px; position: relative; overflow: hidden; }
.classes-benefits article > div { min-width: 0; }
.classes-benefits article:not(:last-child)::after { content: ''; position: absolute; top: 24px; right: 0; bottom: 24px; width: 1px; background: #d7d7d7; }
.classes-benefits svg { width: 46px; height: 46px; flex: 0 0 auto; fill: none; stroke: #f6ad00; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.classes-benefits h3 { margin: 0 0 7px; color: #111; font-size: 13px; font-weight: 900; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; }
.classes-benefits p { margin: 0; color: #333; font-size: 11px; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
    .class-card { grid-template-columns: 270px minmax(0, 1fr) 130px; }
    .class-card__content { padding: 30px; }
    .classes-benefits { grid-template-columns: 1fr 1fr; }
    .classes-benefits article:nth-child(2)::after { display: none; }
    .classes-benefits article:nth-child(-n+2) { border-bottom: 1px solid #d7d7d7; }
}

@media (max-width: 720px) {
    .classes-hero { min-height: 310px; background-position: 62% center; }
    .classes-hero h1 { font-size: 36px; }
    .classes-hero p { font-size: 15px; }
    .classes-page { padding-top: 28px; }
    .classes-page .gym-shell { width: min(100% - 24px, 1410px); }
    .class-card { width: 100%; grid-template-columns: 105px minmax(0, 1fr); min-height: 145px; }
    .class-card__media { min-height: 150px; }
    .class-card__content { padding: 18px 14px; overflow: hidden; }
    .class-card__content h2 { margin-bottom: 9px; font-size: 16px; line-height: 1.2; }
    .class-card__content h3 { margin-bottom: 8px; font-size: 12px; }
    .class-card__content p { font-size: 12px; line-height: 1.45; }
    .class-card__facts { grid-column:1/-1; padding:13px 16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; border-top:1px solid #eee; border-left:0; }
    .class-card__facts>div { grid-template-columns:20px minmax(0,1fr); gap:7px; }
    .class-card__facts i { font-size:15px; }
    .class-card__facts strong { font-size:12px; }
    .class-card__facts small { font-size:8px; }
    .classes-benefits { grid-template-columns: 1fr; }
    .classes-benefits article { min-height: 110px; padding: 22px 18px; }
    .classes-benefits article::after { display: none; }
    .classes-benefits article:not(:last-child) { border-bottom: 1px solid #d7d7d7; }
}

@media (max-width: 430px) {
    .class-card { grid-template-columns: 1fr; }
    .class-card__media { height: 190px; }
    .class-card__facts { grid-column:auto; }
}