@import url('./general.css');
@import url('./cards.css');

/* Card Grid */

body {
    justify-content: space-between;
}

main {
    align-self: center;
    display: grid;
    grid-auto-rows: auto;
    justify-items: center;
    max-width: 130rem;
    width: 100%;
}

/* Columns */

@media (width < 44.5rem) {
    main {
        grid-template-columns: 1fr;
    }
}

@media (44.5rem <= width < 66rem) {
    main {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (66rem <= width) {
    main {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Gaps and Paddings */

@media (width < 23rem) {
    main {
        padding: var(--gap12) 0;
    }
}

@media (23rem <= width < 26rem) {
    main {
        padding: var(--gap12);
    }
}

@media (width < 26rem) {
    main {
        gap: var(--gap12);
    }
}

@media (26rem <= width) {
    main {
        gap: var(--gap24);
        padding: var(--gap24);
    }
}

/* Greetings Info */

main > h1 {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
}

main > a.category.long {
    grid-column: 1 / -1;
    grid-row: 2;
}

main > section.filter_btns {
    display: flex;
    flex-flow: row wrap;
    gap: var(--gap8);
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    width: 100%;
}