/*
 * All of the CSS for your public-facing functionality should be included in this file.
 * This is where you find all the default styles for the coupons
 */

.offers {display: grid; grid-template-columns: repeat(auto-fit, 320px); grid-gap: 6.5rem 1rem; padding-bottom: 1.5rem; margin: 0 auto; width: 100%; max-width: 1600px; justify-content: center;}
.offer {text-align: center;}
.offer-content {height: 100%; position: relative;}

.offer-body {display: flex; flex-direction: column; height: 100%; padding: .5rem; border: 2px dashed; border-radius: 4px; background-color: #fff; text-decoration: none; color: unset;}
.offer-body:hover, .offer-body:focus {box-shadow: 0 4px 20px rgba(0,0,0,.3); text-decoration: none;}

.offer-title {background: #c7f6b6; padding: 1rem; border-radius: 4px; margin: -1.5rem .5rem 0; box-shadow: 0 3px 10px rgba(0,0,0,.3); font-size: smaller; font-weight: bolder; text-transform: capitalize;}

.offer-deal {font-size: x-large; font-weight: bold; padding: 0.5rem 0; border-bottom: 2px solid; margin: 1rem 1rem 0;}

.offer ul, .offer ol {text-align: left;}
.offer-terms {margin: auto 0;}

.street-number {display: block;}
.offer-expiration, .offer-footer a {font-size: smaller; margin: 1rem auto .5rem;}


 /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

 /* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

 /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

 /* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

 /* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}