.tb-weather-list-container {
    margin-top: theme('margin.6');
    padding-bottom: theme('margin.4');
}

.tb-weather-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: theme('margin.5') theme('margin.3');
    list-style: none;
    margin: 0;
    padding: 0;
}

.tb-weather-list__item {
    + .tb-weather-list__item {
        margin-top: theme('margin.3');
    }
}

.tb-weather-list--border {
    .tb-weather-list__item {
        + .tb-weather-list__item {
            padding-top: theme('margin.3');
            border-top: 1px solid theme('colors.gray.400');
        }
    }
}

// Horizontal layout makes only sense at a certain viewport width
.tb-weather-list--horizontal {
    // Prepare the list for the floated items
    overflow: hidden;
    position: relative;
    text-align: center;

    .tb-weather-list__item {
        text-align: left;
        display: inline-block;
        margin-top: 0;

        + .tb-weather-list__item {
            padding-top: 0;
            border-top: 0;
        }
    }

    &.tb-weather-list--border {
        .tb-weather-list__item {
            border-right: 1px solid theme('colors.gray.400');

            &:last-of-type {
                border-right: 0;
            }
        }
    }
}
