* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    background: #111;
    color: #fff;
    font-family: "Lexend", Arial, sans-serif;
}


/* HEADER */

.equipment-header {
    padding: 48px 4%;
    background: #171717;
}

.back-link {
    display: inline-block;
    margin-bottom: 30px;

    color: #aaa;
    text-decoration: none;

    font-family: "Lexend", Arial, sans-serif;
    font-size: 14px;
    letter-spacing: .06em;
}

.back-link:hover {
    color: #fff;
}

.equipment-header h1 {
    margin: 0;

    font-family: "Barlow Condensed", Arial, sans-serif;
    font-size: clamp(70px, 9vw, 160px);
    line-height: .8;
    letter-spacing: .01em;
}

.equipment-header p {
    margin: 22px 0 0;

    font-size: 18px;
    letter-spacing: .08em;
}


/* GALLERY */

.equipment-gallery {
    padding: 8px;

    column-count: 3;
    column-gap: 8px;

    background: #111;
}

.equipment-item {
    display: block;

    width: 100%;
    margin: 0 0 8px;

    break-inside: avoid;

    overflow: hidden;
    background: #222;
}

.equipment-item img {
    display: block;

    width: 100%;
    height: auto;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.equipment-item:hover img {
    transform: scale(1.015);
    opacity: .9;
}


/* EMPTY FOLDER */

.empty-gallery {
    padding: 60px 4%;

    color: #aaa;
    font-size: 18px;
}


/* RESPONSIVE */

@media (min-width: 1500px) {
    .equipment-gallery {
        column-count: 4;
    }
}

@media (max-width: 900px) {
    .equipment-gallery {
        column-count: 2;
    }

    .equipment-header {
        padding: 36px 24px;
    }
}

@media (max-width: 560px) {
    .equipment-gallery {
        column-count: 1;
    }
}