: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: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        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: grid;

    & ul {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        justify-items: center;
        gap: 10px;
        padding: 0;
        margin: 5px;
    }
}

.item {
    min-width: 180px;
    max-width: 200px;
    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 {
    display: grid; 
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
}

@media (max-width: 1048px) {
    .items ul, #secondRow {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .items ul, #secondRow{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .items ul, #secondRow{
        grid-template-columns: 1fr;
    }
}