:root  {
    --width: max(360px, 50vh); 
}
.drop-in {
    width:  var(--width);
    margin: 5vh auto;
}

.status-message {
    width:  var(--width);
    margin: 0 auto;
    display: none;
}

.header {
    text-align: center;
    margin: 20px;
}

.product-name {
    font-size: max(1em, 1.2vw);
    font-weight: bold;
}

.product-price {
    font-size: max(1em, 1.2vw);
    color: green;
}

.braintree-heading {
    text-align: center;
    font-weight: bold;
}