.flex-layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

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

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    position: absolute !important;
    word-wrap: normal !important;
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

.desktop-only-inline {
    display: inline-block;
}

.small-gap {
    gap: var(--gutter-xs);
}

.button-group {
    display: grid;
    grid-auto-flow: column;
    gap: 10px; /* Adjust this value to change the gap size */
    max-width: max-content;
}

@media (max-width: 720px) {
    .desktop-only {
        display: none !important;
    }

    .desktop-only-inline {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .button-group {
        margin: auto;
    }

    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none !important;
    }

    .desktop-only-inline {
        display: none !important;
    }
}