:root {
    --card_width: 450px;
    --row_increment: 10px;
    --card_border_radius: 16px;
    --card_small: 26;
    --card_medium: 33;
    --card_large: 45;
}

body {
    margin: 0;
    padding: 0;
    padding-top: 5px;
    background-color: white;
}

.pin_container {
    margin: 0x;
    padding: 0;
    width: 80vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--card_width));
    grid-auto-rows: var(--row_increment);
    justify-content: center;
    background-color: white;
}

.card {
    padding: 0;
    margin: 15px 10px;
    border-radius: var(--card_border_radius);
    background-color: none;
}

.card_small {
    grid-row-end: span var(--card_small);
}

.card_medium {
    grid-row-end: span var(--card_medium);
}

.card_large {
    grid-row-end: span var(--card_large);
}

#popUpoffer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1001;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.promo-desc {
    font: bold 30px verdana;
    padding: 10px;
    border: 8px solid white;
    text-align: center
}

.promo-bar {
    padding-left: 175px;
    width = 200;
    height = 30;
    align = center;
}


.promo-footer {
    font: bold 35px verdana;
    background: white;
    opacity: 100%;
    padding: 30px;
    text-align: center;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -50px;
    width: 90%;
}