.bins-long-gadget .bin-icon 
{
    width: calc(33% - 15px);
    height: auto;
    aspect-ratio: 1/1;
    background-size: cover;
    display: block;
    float: left;
    margin-right: 15px
}

.bins-short-gadget .bin-icon 
{
    width: 50px;
    height: auto;
    aspect-ratio: 1/1;
    background-size: cover;
    display: block;
    float: right;
    margin-left: 15px;
    margin-top: 10px;
}


.bins-g .bin-icon {
    background-image: url('grey-bin.png');
}

.bins-b .bin-icon {
    background-image: url('brown-bin.png');
}

.bins-r.bins-b .bin-icon {
    background-image: url('recyclables.png'),url('brown-bin.png');
}

.bins-r .bin-icon {
    background-image: url('recyclables.png');
}

.bins-s.bins-b .bin-icon {
    background-image: url('recycling-sacks.png'),url('brown-bin.png');
}

.bins-s .bin-icon {
    background-image: url('recycling-sacks.png');
}

.bins-g.bins-r .bin-icon {
    background-image: url('recyclables.png'), url('grey-bin.png');
}


/* Inline #16 | http://localhost:8888/ANH2/Bins-test-page */

.bin-text {
    display: block;
    float: left;
}

.bins-long-gadget .bin-text {
    width: 66%;
}

.bins-short-gadget .bin-text {
    width: calc(100% - 65px);
}

@media all and (max-width : 768px) {
    
    .bins-short-gadget .bin-text {
    width: 100%;
}
    
}

@media all and (max-width : 600px) {
    
    .bins-short-gadget .bin-text {
    width: calc(100% - 65px);
}
    
}

.bin-list {
    list-style: none;
    padding: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

.bin-list::after {
    content: '';
    display: block;
    clear: both;
}

.bin-list > li {
    margin-bottom: 5px;
}

.bins-long-gadget .bin-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    padding-bottom: 15px;
}

.bins-short-gadget {
    padding-bottom: 15px;
}

.bin-location {
    font-size: 1.1em;
    width: 100%;
    display: block;
}

.bins-short-gadget .bin-list {
    margin: 5px 0;
}

.bins-short-gadget h2 {
    margin-bottom: 10px;
}

.bins-short-gadget .bin-location {
    margin: 5px 0;
}


.bin-link, .bin-alert {
    display: block;
    width: 100%;
}

.bins-long-gadget .bin-date, .bins-long-gadget .bin-type {
    display: block;
    width: 100%;
}

.bin-alert {
    color: #aa0000;
}

.bin-list li {
    width: 100%;
    float: left;
}