:root {

    --mk-class-card-height: 340px;

}

.mk-landing {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

}

.mk-landing-hero {


    position: relative;

    overflow: hidden;

    display: grid;

    grid-template-columns: 450px 1fr;

    gap: 20px;

    align-items: center;

    min-height: 450px;

    padding: 10px 0 30px;

}


.mk-landing-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background: url("../images/class-bg.webp") center center / cover no-repeat;

    opacity: .65;

    mask-image:
        linear-gradient(to bottom,
            transparent 0%,
            #000 20%,
            #000 80%,
            transparent 100%),
        linear-gradient(to right,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%);

    mask-composite: intersect;

    -webkit-mask-image:
        linear-gradient(to bottom,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%),
        linear-gradient(to right,
            transparent 0%,
            #000 10%,
            #000 90%,
            transparent 100%);

    content: "";



}



.mk-breadcrumb {

    margin-bottom: 28px;

    font-size: 14px;

    color: var(--mk-text-muted);

}

.mk-breadcrumb a {

    color: var(--mk-text-muted);

    text-decoration: none;

}

.mk-breadcrumb span {

    margin: 0 10px;

}

.mk-landing-left h1 {

    font-size: 72px;

    line-height: 1;

    font-weight: 900;

    margin-bottom: 24px;

}

.mk-landing-left p {

    font-size: 22px;

    line-height: 1.6;

    color: var(--mk-text-muted);

    margin-bottom: 40px;

}

.mk-landing-right img {

    width: 100%;

    display: block;

    border-radius: 22px;

}

.mk-landing-title {

    font-size: 72px;

    line-height: 1;

    font-weight: 900;

    margin-bottom: 24px;

}

.mk-landing-title .orange {

    color: var(--mk-orange);

}

.mk-landing-left {

    justify-self: start;

    text-align: left;

}

.mk-landing-right {

    justify-self: end;

    width: 100%;

}

.mk-landing-left,
.mk-landing-right {

    position: relative;

    z-index: 1;

}

/*=====================================
CLASS GRID
======================================*/

.mk-class-grid {

    margin-top: 0px;

}

.mk-class-grid-inner {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 28px;

}

.mk-class-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    min-height: var(--mk-class-card-height);

    padding: 32px;

    background: #151515;

    border: 1px solid #2a2a2a;

    border-radius: 18px;

    text-decoration: none;

    transition: background .2s ease;

    justify-content: flex-start;

    width: 100%;

    box-sizing: border-box;

    margin-top: 0px;
}

.mk-class-icon {

    height: 120px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 16px;

}

.mk-class-icon img {

    max-width: 130px;
    max-height: 130px;

    width: auto;
    height: auto;

    object-fit: contain;

}

.mk-class-card h3 {

    margin: 0 0 24px;

}

.mk-class-specs {

    display: grid;

    margin-top: auto;

    gap: 10px;

    width: 100%;

}

.mk-class-specs span {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 38px;

    background: #202020;

    border-radius: 10px;

    font-size: 14px;

    transition: .2s;

}

.mk-class-card:hover {

    background: #1b1b1b;

}

.mk-class-specs span:hover {

    background: var(--mk-orange);

}

.mk-class-specs.two {

    grid-template-columns: repeat(2, 1fr);

}

.mk-class-specs.three {

    grid-template-columns: repeat(2, 1fr);

}

.mk-class-specs.three .mk-spec:last-child {

    grid-column: 1 / -1;

    justify-self: center;

    width: 50%;
}

.mk-class-specs.four {

    grid-template-columns: repeat(2, 1fr);

}

.mk-spec {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 40px;

    padding: 0 10px;

    background: rgba(255, 255, 255, .03);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 10px;

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    box-sizing: border-box;

}

.mk-spec:hover {

    background: var(--class-color);

    border-color: var(--class-color);

    color: #111;

    box-shadow: 0 0 18px color-mix(in srgb, var(--class-color) 35%, transparent);

    color: #fff;

}

.mk-class-name {

    color: var(--class-color);

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 20px;


}

.mk-class-specs.two,
.mk-class-specs.three,
.mk-class-specs.four {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}