.container {
    min-width: 300px;
    max-width: 400px;
    margin:0 auto;
}
.attribute-tiles-container {
    display: flex;
    flex-wrap: wrap;
    /* gap: 10px; */
}
.attribute-info-text {font-size: 13px;
    margin-bottom: 7px;
    text-align: left;}

.attr-tile {
    flex: 1 1 78px;
    height: 45px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    background-color: #fff;
    transition: all 0.2s;
    margin:0 -1px -1px 0;
    position:relative;
}

.attr-tile::after {content: ''; position: absolute; width: 1px; height: 100%; right: -1px; top: 0; bottom: 0; background: #000; opacity: 0; z-index: 1;}
.attr-tile::before {content: ''; position: absolute; width: 100%; height: 1px; right: 0;bottom: -1px; background: #000; opacity: 0; z-index: 1;}
.attr-tile:hover {border-color: #000;}
.attr-tile:hover::after, 
.attr-tile:hover::before {opacity: 1;}

.attr-tile.active {
    border-color: #000;
    background-color: #000;
    color: #fff;
}

.attribute-group {position:relative;  margin:0 auto 20px;
    & label {position:absolute; top: -9px;left: 4px;background: #fff;line-height: 14px;padding: 2px 6px;border: 0; text-transform: uppercase;letter-spacing: .5px;font-size: 11px;color: #919191;}
    & select {width: 100%; border: 1px solid #787878; border-radius: 3px; padding:10px 10px;color: #8b8b8b; text-align: center;}
    & label {display: none;}
    }

h1 {font-size: 26px; letter-spacing: 0px; font-weight: 100;}

/*
@media (width > 992px) {
    .price-section, h1, .tax-info, .shipping-info {text-align: left;}
    h1 {margin-bottom: 10px !important;}
    
}
*/