:root {
    --bg-primary: white;
    --bg-secondary: brown;
    --clr-primary: #635e5e;
    --clr-secondary: white;
    --primary-layer: #6c73722e;
    --secondary-layer: #ffffff3d;
    --layer: #defeff75;
}


.debug * {
    border: 1px solid var(--debug-clr, #ff02025e) !important;
}

.debug *:nth-child(1) { --debug-clr: red; }

.debug *:nth-child(2) {
    --debug-clr: aqua;
}

.debug *:nth-child(3) {
    --debug-clr: cyan;
}

.debug *:nth-child(4) {
    --debug-clr: deeppink;
}

.debug *:nth-child(5) {
    --debug-clr: purple;
}

.debug *:nth-child(6) {
    --debug-clr: green;
}

.debug *:nth-child(1) {
    --debug-clr: black;
}

img, video, iframe, audio {
    max-width: 100%;
}

.two-liner {
    --line: 2;
    -webkit-line-clamp: var(--line);
    display: -webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: onn */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 17px;
}

.three-liner {
    --line: 3;
    -webkit-line-clamp: var(--line);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    line-height:2.4rem;
}

.one-liner {
    --line: 1;
    -webkit-line-clamp: var(--line);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 17px;
    line-height: 2.4rem;
}

a {
    color: var(--clr-primary);
}

html,
body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}