/*
 * PLP regalo: il blocco dei tagli sopra la griglia.
 *
 * Prefisso gp-*, come pdp-*, ck-*, od-*: e' CSS di pagina e non deve poter toccare altro.
 * Qui c'e' solo quello che Bootstrap non copre, cioe' spaziatura e forma del pannello e
 * delle piastrelle. I colori, i bordi e gli stati dei bottoni restano quelli di marca
 * (.btn-red-winedering-inverted, .link-red-winedering, .background-color-lightred-winedering).
 */

.gp-amounts {
    border-radius: 14px;
    padding: 26px 26px 14px;
    margin: 34px 0 28px;
}

.gp-amounts__title {
    margin-top: 0;
    margin-bottom: 10px;
}

.gp-amounts__lead {
    margin-bottom: 14px;
}

/* Le due colonne si guardano in faccia invece di allinearsi in alto: il testo e' piu' alto
   delle piastrelle e lasciava mezzo pannello vuoto. Solo da tablet in su, perche' sotto i due
   blocchi stanno uno sopra l'altro. */
@media (min-width: 768px) {
    .gp-amounts__row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* L'importo libero sta sotto le piastrelle, non sopra: e' l'alternativa, e si offre dopo
   aver fatto vedere i tagli. */
.gp-amounts__free {
    display: inline-block;
    margin-top: 4px;
}

/* La piastrella: un bottone di marca con piu' aria e l'importo in evidenza, su fondo bianco
   perche' sta sopra la banda colorata. */
.gp-amount {
    background-color: #fff;
    padding: 20px 6px;
    margin-bottom: 14px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 10px;
    white-space: nowrap;
}

.gp-amount:hover,
.gp-amount:focus {
    background-color: #fff;
}

.gp-amounts__icon {
    vertical-align: -3px;
    margin-right: 8px;
}

/* Su telefono le piastrelle restano due per riga (col-xs-6) e il pannello respira meno. */
@media (max-width: 767px) {
    .gp-amounts {
        padding: 20px 16px 8px;
        margin: 26px 0 22px;
    }

    .gp-amount {
        font-size: 18px;
        padding: 14px 4px;
    }
}