.main-container {
        padding: 10px;
        background-color: lightgray;
    }

    .header {
        background-color: none;
        color: darkgrey;
        padding: 10px;
        text-align: center;
        display: inline-block;
    }

    #swap-container .header {
        background-color: #289dcc;
        color: white;
    }

    #swap-container .header.active {
        background-color: #fff;
        font-weight: bold;
        border: 1px solid #289dcc;
        color: #289dcc;
    }

    .header:hover {
        background-color: #fff;
        cursor: pointer;
    }

    main {
        display: flex;
        flex-direction: column;
        padding: 10px;
    }

    #retiring_products {
        width: 100%;
    }

    .content {
        display: flex;
        flex-wrap: wrap;
        padding: 15px 10px;
    }

    .content:not(:first-child) {
        display: none;
    }

    .content .active {
        display: block;
    }

    .item {
        flex-basis: 50%;
        width: 50%;
        margin-bottom: 8px;
    }

    #next {
        background: #f7f7f7;
    }

    .item p {
        padding: 10 0px;
        display: table-row;
        width: 190px;
    }

    .item a {
        margin-right: 5px;
    }

    h2 {
        margin-top: 0;
    }

    .hidden {
        display: none;
    }

    .reduce {
        color: red;
        padding-left: 20px;
    }


    footer {
        background-color: #333;
        color: #fff;
        padding: 10px;
        text-align: center;
        clear: both;
    }

    /* Make the grid responsive */
    @media (max-width: 768px) {}

    @media (max-width: 480px) {

        section {
            width: auto;
        }

        .content {
            display: inline;
        }

        .content.active {
            display: inline !important;
        }

        #retiring_products {
            display: block;
            width: 100%;
        }

        #next {
            background: transparent;
        }

        .item {
            width: 100%;
            height: 110px;
        }

        .item:nth-of-type(even) {
            background: #f7f7f7 !important;
        }

        .item:nth-child(4) {
            background: #f7f7f7 !important;
        }

        .item p {
            padding: none !important;
            width: 100%;
            display: block !important;
        }

        .reduce {
            padding-left: 0px;
        }
    }