/* offers */
section.offers {
	background-color: #f3f7ea;
	font-size: 1.3em;
	padding: 20px 0;
	grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
	gap: 15px;
	justify-items: center;
}

section.offers .offer {
    width: 90vw;
    min-width: 290px;
    max-width: 450px;
}

section.offers .offer.bug-zapper .img {
    background:url('../img/sprite-offers.png') 0px -0px;
    width:146px;height:310px;
}

section.offers .offer.critter-catcher .img {
    background:url('../img/sprite-offers.png') -146px -0px;
    width:243px;height:310px;
}

section.offers .img { display:inline-block; background-repeat: no-repeat !important; }

section.offers .offer > div > h4 {
	font-size: 1.2em;
	margin-bottom: 20px;
}

section.offers .offer > div {
	text-align: center;
	color: #1b7225;
	padding-top: 30px;
	/* background-image: linear-gradient(var(--white), var(--off-white)); */
	background-color: var(--white);
	box-shadow: 5px 5px 5px var(--border-shading);
    border: 2px solid var(--border-shading);
}

section.offers .details {
	display: grid;
	font-size: 1em;
	margin-top: 30px;
	color: var(--dkblue);
	background-color: var(--white);
	text-align: center;
	padding: 20px;
	position: relative;
	grid-template-rows: 150px 90px;
	line-height: 1.2em;
}

section.offers .offer.critter-catcher .details { grid-template-rows: 110px 90px; }

section.offers .details p {
    font-size: .7em;
    text-align: left;
}

section.offers .details a {
	font-weight: 900;
	display: grid;
	justify-content: space-between;
	align-items: end;
	grid-template-columns: repeat(2, auto);
}

section.offers .details a span em { 
    color: var(--green);
    font-style: normal;
    font-size: 1.2em;
    vertical-align: middle;
}

@media only screen and (min-width:320px) {
	section.offers .offer.critter-catcher .details { grid-template-rows: 15vw 90px; }
}

@media only screen and (min-width:640px) {
    section.offers .details { grid-template-rows: 24vw 90px; }
}

@media only screen and (min-width:900px) {
    section.offers { font-size: 1em; }
	section.offers .details { grid-template-rows: 16vw 90px !important; }
    section.offers .offer { max-width: 405px; }
}

@media only screen and (min-width:1400px) {
    section.offers { font-size: .9em; }
	section.offers .details { grid-template-rows: 150px 90px !important; }
}