// assets/styles/global.scss

// customize some Bootstrap variables
$primary: darken(#005035, 20%);

// the ~ allows you to reference things in node_modules
@import "~bootstrap/scss/bootstrap";

footer {
    background-color: #ddd;
    height: 6rem;
}

.container {
    min-height: 100vh;
    margin-bottom: -9rem;
}

.offer-img {
    height: 15rem;
    object-fit: cover;
}

.offer {
    $card-height: 100%;
    width: 20rem;
}

.username {
    float: left;
}

.zip {
    float: right;
}

.img-container {
    width: 50%;
    min-width: 20rem;
}

.offer-info {
    width: 50%;
    min-width: 20rem;;
}

.offer-footer {
    color: #555;
}

.user-link {
    color: #555;
}

.user-link:hover {
    color: #000;
}

.show-img-container {
    min-width: 20rem;
    max-width: 30rem;
}

.card {
    margin-bottom: 0 !important;
}

@include media-breakpoint-up(sm) {
    .show-img-container {
        margin-right: 2rem;
    }
  }