.subscription-banner { display: block; padding: 0 2rem 2rem; background-color: white; } .plp_coffeeSubscription_container { position: relative; display: block; width: 100%; margin: auto; background-color: #fff; box-shadow: 0 0 8px 0 rgba(23, 23, 26, 0.05), 0 2px 8px 0 rgba(23, 23, 26, 0.08); } .plp_coffeeSubscription_content { position: relative; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; justify-content: center; width: 100%; align-content: center; flex-wrap: wrap; align-items: center; } .plp_coffeeSubscriptionFlex_container { display: block; position: relative; text-align: center; } .plp_coffeeSubscriptionImages_container img { display: inline-block; } .plp_coffeeSubscriptionTitle { letter-spacing: 0.1rem; line-height: 1.4; font-weight: 400; text-transform: none; color: #17171a; } .plp_coffeeSubscriptionSubtitle { font-size: 1rem; font-weight: 400; letter-spacing: 0.05rem; line-height: 1.2; color: #6f6f70; } .virtualProductPackCTA { border: 1px solid #3D8705; outline: none; background: #3D8705; border-color: #3D8705; box-shadow: none; width: 100%; margin: auto; border-radius: 1.5rem; transition: 0.3s ease-in-out; transition-property: background-color, color, box-shadow, border-color; cursor: pointer; } .virtualProductPackCTA:hover { box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3); } .virtualProductPackInnerCTA { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.0625rem; position: relative; color: #fff; } @media only screen and (min-width: 996px) { .plp_coffeeSubscription_container { max-width: 72.5rem; } .plp_coffeeSubscription_content { flex-direction: row; } .plp_coffeeSubscriptionImages_container { flex: 0 0 22%; width: 22%; } .plp_coffeeSubscriptionText_container { flex: 0 0 50%; width: 50%; } .plp_coffeeSubscriptionCTA_container { flex: 0 0 28%; width: 28%; } .plp_coffeeSubscriptionImages_container img { margin-right: -35px; } .virtualProductPackCTA { max-width: 220px; } .plp_coffeeSubscriptionTitle { font-size: 1.25rem; } .virtualProductPackInnerCTA { padding: 12px 0; } } @media only screen and (min-width: 768px) and (max-width: 995px) { .subscription-banner { padding: 0 0rem 2rem; } .plp_coffeeSubscription_container { height: 110px; } .plp_coffeeSubscription_content { flex-direction: row; } .plp_coffeeSubscriptionImages_container { flex: 0 0 20%; width: 20%; } .plp_coffeeSubscriptionText_container { flex: 0 0 52%; width: 52%; } .plp_coffeeSubscriptionCTA_container { flex: 0 0 28%; width: 28%; } .plp_coffeeSubscriptionImages_container img { width: 100%; } .virtualProductPackCTA { max-width: 180px; } .plp_coffeeSubscriptionTitle { font-size: 1.1rem; } .virtualProductPackInnerCTA { padding: 10px 0; } } @media only screen and (min-width: 801px) and (max-width: 995px) { .plp_coffeeSubscription_container { max-width: 768px; } } .subscription-banner { padding: 0 0rem 2rem; } @media only screen and (min-width: 768px) and (max-width: 800px) { .plp_coffeeSubscription_container { max-width: 708px; } } .subscription-banner { padding: 0 0rem 2rem; } @media only screen and (max-width: 767px) { .plp_coffeeSubscription_container { max-width: calc(100% - 2rem); } .plp_coffeeSubscription_content { flex-direction: column; padding: 40px; } .plp_coffeeSubscriptionImages_container, .plp_coffeeSubscriptionText_container, .plp_coffeeSubscriptionCTA_container { flex: 0 0 100%; width: 100%; } .plp_coffeeSubscriptionText_container { margin: 12px 0 20px; } .plp_coffeeSubscriptionImages_container img { width: auto; height: 100%; } .virtualProductPackCTA { max-width: 220px; } .plp_coffeeSubscriptionTitle { font-size: 1.25rem; margin-bottom: 10px; } .virtualProductPackInnerCTA { padding: 12px 0; } }