html {
    scroll-behavior: smooth;
}

img {
    max-width: 100%;
    height   : auto;
}

.w-page {
    margin-left : auto;
    margin-right: auto;
}

.p-0 {
    padding: 0;
}

.p-sm {
    padding: var(--size-sm);
}

.p-md {
    padding: var(--size-md);
}

.p-lg {
    padding: var(--size-lg);
}

.pt-sm {
    padding-top: var(--size-sm);
}

.pt-md {
    padding-top: var(--size-md);
}

.pt-lg {
    padding-top: var(--size-lg);
}

.w-50 {
    width: 50%;
}

.w-100 {
    width: 100%;
}

.push {
    margin-left: auto;
}

.flex-fit {
    flex-basis: fit-content;
}

.align-c {
    display        : flex;
    justify-content: center;
}

.align-m {
    display    : flex;
    align-items: center;
}

.align-r {
    display        : flex;
    justify-content: flex-end;
}

.distribute-fit {
    display        : flex;
    justify-content: space-between;
}

.gap-xs {
    gap: var(--size-xs);
}

.gap-sm {
    gap: var(--size-sm);
}

.align-l {
    display        : flex;
    justify-content: flex-start;
}

.center-text {
    text-align: center;
}

.clearfix:after {
    clear     : both;
    content   : '';
    display   : block;
    height    : 0;
    visibility: hidden;
}

.relative {
    position: relative;
}

.fixed {
    position: fixed;
}