.equipment-wrap {
    position:relative;
    width:100%
}

.equipment-section {
    position:relative;
    width:100%;
    height:calc(100vh - var(--header-height, 140px));
    background:#161616;
    overflow:hidden
}

@media (min-width: 992px) {
    .equipment-section {
        height:calc(100dvh - var(--header-height, 140px))
    }
}

.equipment-section__viewport {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden
}

.equipment-section__label {
    position:absolute;
    left:clamp(24px,2.5vw,40px);
    top:50%;
    transform:translateY(-120px);
    z-index:20;
    display:flex;
    align-items:center;
    gap:12px;
    pointer-events:none
}

.equipment-section__label-dot {
    flex:0 0 8px;
    width:8px;
    height:8px;
    border-radius:4px;
    background:var(--point);
    opacity:.47
}

.equipment-section__label-text {
    margin:0;
    font-size:18px;
    font-weight:700;
    line-height:32px;
    color:#fff;
    white-space:nowrap
}

.equipment-section__guides {
    position:absolute;
    top:50%;
    left:var(--eq-guide-x, 50%);
    width:var(--eq-guide-w, 240px);
    height:var(--eq-guide-h, 320px);
    transform:translate(-50%,calc(-50% + var(--eq-guide-y, 0px)));
    z-index:2;
    pointer-events:none
}

.equipment-section__guides.is-intro .equipment-card__brackets {
    inset:clamp(12px,2vw,24px)
}

.equipment-section__guides.is-intro .equipment-card__bracket {
    width:clamp(24px,4vw,40px);
    height:clamp(24px,4vw,40px)
}

.equipment-section__guide-v {
    position:absolute;
    top:50%;
    left:50%;
    width:1px;
    height:200vh;
    background:#2b2b2b;
    transform:translate(-50%,-50%)
}

.equipment-section__guide-h {
    position:absolute;
    top:50%;
    left:50%;
    width:200vw;
    height:1px;
    background:#2b2b2b;
    transform:translate(-50%,-50%)
}

.equipment-section__focus-mark {
    position:absolute;
    top:50%;
    left:50%;
    width:20px;
    height:20px;
    transform:translate(-50%,-50%);
    z-index:2
}

.equipment-section__focus-mark:before,.equipment-section__focus-mark:after {
    content:"";
    position:absolute;
    background:#fff
}

.equipment-section__focus-mark:before {
    left:50%;
    top:0;
    width:2px;
    height:100%;
    transform:translate(-50%)
}

.equipment-section__focus-mark:after {
    top:50%;
    left:0;
    width:100%;
    height:2px;
    transform:translateY(-50%)
}

.equipment-section__guides .equipment-card__brackets {
    position:absolute;
    top:-16px;
    right:-20px;
    bottom:-16px;
    left:-20px;
    z-index:3;
    opacity:1;
    pointer-events:none
}

.equipment-section__guides .equipment-card__bracket {
    position:absolute;
    width:30px;
    height:30px;
    border-color:#fff;
    border-style:solid;
    border-width:0
}

.equipment-section__guides .equipment-card__bracket--tl {
    top:0;
    left:0;
    border-top-width:1px;
    border-left-width:1px
}

.equipment-section__guides .equipment-card__bracket--tr {
    top:0;
    right:0;
    border-top-width:1px;
    border-right-width:1px
}

.equipment-section__guides .equipment-card__bracket--bl {
    bottom:0;
    left:0;
    border-bottom-width:1px;
    border-left-width:1px
}

.equipment-section__guides .equipment-card__bracket--br {
    bottom:0;
    right:0;
    border-bottom-width:1px;
    border-right-width:1px
}

.equipment-section__track {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    z-index:5;
    will-change:transform
}

.equipment-card {
    position:absolute;
    top:50%;
    width:var(--eq-card-w, 355px);
    transform:translate(var(--eq-x, 0),calc(-50% + var(--eq-y, 0px)));
    opacity:.3;
    transition:opacity .45s ease,filter .45s ease;
    z-index:1
}

.equipment-card.is-active {
    opacity:1;
    z-index:10;
    filter:none
}

.equipment-card__inner {
    position:relative;
    z-index:2
}

.equipment-card__glow {
    position:absolute;
    top:-40%;
    right:-40%;
    bottom:-40%;
    left:-40%;
    opacity:0;
    transition:opacity .45s ease;
    pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(255,255,255,.18) 0%,transparent 70%)
}

.equipment-card.is-active .equipment-card__glow {
    opacity:1
}

.equipment-card__media {
    position:relative;
    z-index:2;
    width:var(--eq-card-w, 355px);
    height:var(--eq-card-h, 320px);
    box-shadow:none;
    transition:box-shadow .45s ease,width .35s ease,height .35s ease
}

.equipment-card.is-active .equipment-card__media {
    box-shadow:0 0 16px #ffffff26
}

.equipment-card__img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center
}

.equipment-card__img--placeholder {
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#2a2a2a,#1a1a1a)
}

.equipment-card__info {
    position:absolute;
    left:calc(100% + 20px);
    top:50%;
    z-index:3;
    transform:translateY(-50%);
    min-width:355px;
    max-width:355px;
    padding:20px;
    background:#2e2e2e;
    border:1px solid rgba(255,255,255,.1);
    opacity:0.66;
    visibility:hidden;
    transition:opacity .4s ease,visibility .4s ease,transform .4s ease;
    pointer-events:none
}

.equipment-card.is-active .equipment-card__info {
    opacity:0.66;
    visibility:visible;
    transform:translateY(-50%) translate(0)
}

.equipment-card__name {
    margin:0 0 20px;
    font-size:24px;
    font-weight:600;
    line-height:36px;
    color:#fff
}

.equipment-card__desc {
    margin:0;
    line-height:26px;
    color:#f3f4f6
}

.equipment-section__ruler {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:20px;
    z-index:15;
    pointer-events:none;
    background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0,rgba(255,255,255,.25) 1px,transparent 1px,transparent 12px);
    opacity:.35
}

@media (max-width: 991.98px) {
    .equipment-section {
        height:calc(100lvh - var(--header-height, 140px));
        min-height:520px
    }
    .equipment-section__label {
        top:24px;
        bottom:auto;
        left:clamp(20px,5vw,24px);
        transform:none;
        z-index:20
    }
    .equipment-section--mobile .equipment-card {
        width:var(--eq-slide-w, 88vw);
        opacity:.25
    }
    .equipment-section--mobile .equipment-card.is-active {
        opacity:1
    }
    .equipment-section--mobile .equipment-card__inner {
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:20px;
        width:100%
    }
    .equipment-section--mobile .equipment-card__media {
        flex:0 0 auto;
        margin:0 auto
    }
    .equipment-section--mobile .equipment-card__info {
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        width:100%;
        min-width:0;
        max-width:none;
        padding:16px;
        text-align:center
    }
    .equipment-section--mobile .equipment-card.is-active .equipment-card__info {
        transform:none
    }
    .equipment-section--mobile .equipment-card__name {
        font-size:20px;
        line-height:30px;
        margin-bottom:12px
    }
    .equipment-section--mobile .equipment-card__desc {
        font-size:14px;
        line-height:24px;
        font-weight:400
    }
    .equipment-section__guides .equipment-card__brackets {
        top:-10px;
        right:-12px;
        bottom:-10px;
        left:-12px
    }
    .equipment-section__guides .equipment-card__bracket {
        width:20px;
        height:20px
    }
}