:root {
    --header-BgColor: #164560;
    --hero-BgColor: #216E99;
    --search-BgColor: #B7DDF2;
    --oddItem-BgColor: #2B83B5;
    --evenItem-BgColor: #7FB4D2;
    --text-Color: white;
    --font: Arial, sans-serif;
}

body {
    width: 100%;
    margin: 0;
    font-family: var(--font);

    .container {
        display: flex;
        flex-direction: column;

        width: 100%;
        margin: auto;
        text-align: left;
        color: var(--text-Color);

        >.header {
            height: 100px;
            padding: 20px;

            background-color: var(--header-BgColor);
        }

        >.hero {
            height: 500px;
            padding: 20px;

            background-color: var(--hero-BgColor);
        }

        >.search {
            height: 100px;
            padding: 20px;

            background-color: var(--search-BgColor);
        }
    }
}

.items {
    display: flex;
    flex-direction: column;
    margin: 0 10px 0 10px;

    & ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 10px;
        padding: 0;
    }
}

.item {
    flex-basis: 180px;
    height: 200px;

    color: var(--text-Color);
    text-align: left;
    list-style: none;

    &.item:nth-child(even) {
        background-color: var(--evenItem-BgColor);
    }

    &.item:nth-child(odd) {
        background-color: var(--oddItem-BgColor);
    }
}

#secondRow {
    justify-content: space-between;
}

@media (max-width: 1024px), (max-width: 768px), (max-width: 480px) {
    .item {
        flex-basis: 180px;
    }
}