/* Horizontal linear layout */
.horizontal-layout {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.horizontal-layout.align-center {
    align-items: center;
}

.horizontal-layout.align-stretch {
    align-items: stretch;
}

.horizontal-layout.space-between {
    justify-content: space-between;
}

.horizontal-layout.align-baseline {
    align-items: baseline;
}

.horizontal-layout.align-end {
    align-items: end;
}

@media screen and (max-width: 720px) {
    
    .horizontal-layout.horizontal-layout-responsive {
        flex-direction: column;
    }

    .horizontal-layout.horizontal-layout-responsive > .vertical-layout {
        width: 100%;
    }
}

/* Vertical linear layout */
.vertical-layout {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex: 1;
}

.vertical-layout.space-between {
    justify-content: space-between;
}

.vertical-layout.align-center {
    align-items: center;
}

.vertical-layout.align-start {
    align-items: start;
}

.vertical-layout.align-end {
    align-items: end;
}

/* Hug Contents */
.item-hug {
    flex: 0 1 auto; /* Prevents the item from growing or shrinking */
    overflow: hidden;
}

/* Fill Available Space */
.item-fill {
    flex: 1;
    overflow: hidden;
}

/* Fixed Size */
.item-fixed {
    flex: 0 0 auto; /* Prevents the item from growing or shrinking */
    overflow: hidden;
}

.gap-large {
    gap: var(--constant-padding-large)
}

.gap {
    gap: var(--constant-padding)
}

.gap-small {
    gap: var(--constant-padding-small)
}

.gap-extra-small {
    gap: var(--constant-padding-extra-small)
}