﻿.none {
    display: none;
}
.contents {
    display: contents;
}

.row {
    display: flex;
}
.column {
    display: flex;
    flex-direction: column;
}
.align-center {align-items: center;}
.align-end {align-items: flex-end;}
.justify-between {justify-content: space-between;}
.justify-center {justify-content: center;}
.justify-end {justify-content: flex-end;}

.m-1 {margin: var(--spacing-1);}
.m-2 {margin: var(--spacing-2);}
.m-3 {margin: var(--spacing-3);}
.m-4 {margin: var(--spacing-4);}
.m-5 {margin: var(--spacing-5);}
.m-6 {margin: var(--spacing-6);}
.m-7 {margin: var(--spacing-7);}
.m-8 {margin: var(--spacing-8);}

.mt-1 {margin-top: var(--spacing-1);}
.mt-2 {margin-top: var(--spacing-2);}
.mt-3 {margin-top: var(--spacing-3);}
.mt-4 {margin-top: var(--spacing-4);}
.mt-5 {margin-top: var(--spacing-5);}
.mt-6 {margin-top: var(--spacing-6);}
.mt-7 {margin-top: var(--spacing-7);}
.mt-8 {margin-top: var(--spacing-8);}

.mb-1 {margin-bottom: var(--spacing-1);}
.mb-2 {margin-bottom: var(--spacing-2);}
.mb-3 {margin-bottom: var(--spacing-3);}
.mb-4 {margin-bottom: var(--spacing-4);}
.mb-5 {margin-bottom: var(--spacing-5);}
.mb-6 {margin-bottom: var(--spacing-6);}
.mb-7 {margin-bottom: var(--spacing-7);}
.mb-8 {margin-bottom: var(--spacing-8);}

.p-1 {padding: var(--spacing-1);}
.p-2 {padding: var(--spacing-2);}
.p-3 {padding: var(--spacing-3);}
.p-4 {padding: var(--spacing-4);}
.p-5 {padding: var(--spacing-5);}
.p-6 {padding: var(--spacing-6);}
.p-7 {padding: var(--spacing-7);}
.p-8 {padding: var(--spacing-8);}

.pt-1 {padding-top: var(--spacing-1);}
.pt-2 {padding-top: var(--spacing-2);}
.pt-3 {padding-top: var(--spacing-3);}
.pt-4 {padding-top: var(--spacing-4);}
.pt-5 {padding-top: var(--spacing-5);}
.pt-6 {padding-top: var(--spacing-6);}
.pt-7 {padding-top: var(--spacing-7);}
.pt-8 {padding-top: var(--spacing-8);}

.g-1 {gap: var(--spacing-1);}
.g-2 {gap: var(--spacing-2);}
.g-3 {gap: var(--spacing-3);}
.g-4 {gap: var(--spacing-4);}
.g-5 {gap: var(--spacing-5);}
.g-6 {gap: var(--spacing-6);}
.g-7 {gap: var(--spacing-7);}
.g-8 {gap: var(--spacing-8);}

.object-fit-contain {
    object-fit: contain;
}
.object-fit-cover {
    object-fit: cover;
}
.object-fit-fill {
    object-fit: fill;
}

.object-position-center {
    object-position: center;
}
.object-position-top {
    object-position: top;
}
.object-position-bottom {
    object-position: bottom;
}
.object-position-left {
    object-position: left;
}
.object-position-right {
    object-position: right;
}

.fade-in-3 { animation: fade-in .3s ease-in; }
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}