.card-collections{
    display:flex;
    flex-direction:column;
    
}
.collection-title{
    flex: 1 1 auto;
    text-align:center;
    min-height: 30px;
    line-height:30px;
/*    position:relative; */
    font-weight:bold;
    background-color:var(--card-collections-title-bg);
    color:var(--card-collections-title-txt);
/*    bottom:0; */
}
.card-groups {
    display:flex;
    flex-wrap:wrap;
    gap:.5em;
    padding:5px;
    font-size:1em;
}

.group-collection-title {
    color:white;
    font-size:24px;
}

.branded-collection-title {
    display:flex;
    justify-content: center;
    text-align:center;
    background-color:var(--card-collections-title-bg);
}

.branded-collection-image {
    background-color:white;
    max-height:50px;
    width:auto;
    
    
}

.groupcards {
    display:flex;
    flex-wrap:wrap;
    gap:.5em;
    padding:5px;
    border:2px solid brown;
    font-size:1em;
    font-family:'Times New Roman', Times, serif
}
.groupcard {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:stretch;
    padding:5px;
    gap:.5em;
    border-radius: 10px;
    flex: 1 1 auto;
    background-color: white;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
    transition: transform 0.2s ease;
}

.bucket-size-card {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:stretch;
    padding:5px;
    gap:.5em;
    border-radius: 10px;
    flex: 0 1 auto;
    background-color: white;
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.75);
    transition: transform 0.2s ease;
    max-width:55px;
}

@media (max-width:450px) {
    .groupcard {
        max-height:60px;
    }
}

.groupcard:active {
    transform: scale(0.95);
}
.groupingimage {
    margin-inline:.5em;
    max-width: 140px;
    border-radius: 5px;
    
}
.bucket-image {
    margin-inline:.5em;
    border-radius: 5px;
    
}
@media screen and (min-width:395px) {
    .groupingimage {
        max-width: 170px;
    }
    .bucket-image {
       max-width:100px;
    }
}

.flats-image {
    margin-inline:.5em;
    max-width: 120px;
    border-radius: 5px;
    
}
.group-text{
    position:relative;
    font-weight:bold;
    bottom:0;
   
}

.landing-page-footer {
    background-color: var(--footer-bg);
    padding: 2px;
    text-align: center;
    font-size: 12px;
    color: var(--footer-text);
    position: fixed;
    bottom: 0;
    width: 100%;
}