/* Flex things */

.no-padding {
    padding: 0 !important;
}

.flex-section {
    /* these are just the defaults, we add on top after */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;

    width: 100%;
    margin: 0 auto;
    padding: 40px 24px;
    flex-wrap: wrap;
}

/* Flex Modifiers */
.flex-section.column {
    flex-direction: column;
    align-items: flex-start;
}

.flex-section.row {
    flex-direction: row; /* do we need this if the default is row? */
}

/* Flex align modifiers */

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

.flex-section.align-start {
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-section.align-end {
    justify-content: flex-end;
    align-items: flex-end;
}

.flex-section.align-stretch {
    align-items: stretch;
}

.flex-section.between {
    justify-content: space-between;
}

.flex-section.evenly {
    justify-content: space-evenly;
}

.flex-section.no-wrap {
    flex-wrap: nowrap;
}

/* MEDIA QUERIES */

@media only screen and (max-width: 1000px) {
    .flex-section {
        padding: 24px 12px;
    }
}