.wp-block-coffee-friend-category-header-banner .banner-wrapper{border-radius:16px;display:flex;flex-direction:column;height:auto;max-width:1820px;overflow:hidden;position:relative;width:100%}@media screen and (min-width:768px){.wp-block-coffee-friend-category-header-banner .banner-wrapper{flex-direction:column-reverse}}@media screen and (min-width:1200px){.wp-block-coffee-friend-category-header-banner .banner-wrapper{align-items:center;flex-direction:row}}.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-content{display:flex;flex-direction:column;margin-top:auto;padding-bottom:28px;padding-left:12px;padding-right:12px;position:relative;z-index:1}@media screen and (min-width:1200px){.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-content{align-items:flex-start;height:100%;justify-content:center;margin-top:0;max-width:650px;padding:56px;position:absolute;width:100%}}@media screen and (min-width:1440px){.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-content{max-width:770px}}.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-content:after{background:linear-gradient(0deg,var(--bgcolor,#000) calc(100% - 30px),transparent);bottom:0;content:"";height:calc(100% + 7px);left:0;position:absolute;width:100%;z-index:-1}@media screen and (min-width:1200px){.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-content:after{background:linear-gradient(0deg,var(--bgcolor,#000) 52.93%,transparent 59.43%);height:100%}}.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-content .desc,.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-content .title{z-index:1}.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-content .btn{margin-top:24px;position:relative;z-index:1}.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-image-mobile{margin-bottom:-23px;position:relative}@media screen and (min-width:768px){.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-image-mobile{display:none}}.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-image-mobile img{aspect-ratio:740/660;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-image{display:none;position:relative;width:100%;z-index:0}@media screen and (min-width:768px){.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-image{display:flex;justify-content:flex-end}}@media screen and (min-width:1200px){.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-image{height:100%}}.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-image:after{background:linear-gradient(0deg,var(--bgcolor,#000) 52.93%,transparent 59.43%);bottom:-50%;content:"";height:100%;left:0;position:absolute;width:100%;z-index:0}@media screen and (min-width:1200px){.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-image:after{display:none}}.wp-block-coffee-friend-category-header-banner .banner-wrapper .banner-image img{aspect-ratio:1820/580;height:auto;max-width:none;-o-object-fit:cover;object-fit:cover;-o-object-position:95%;object-position:95%;width:100%}@media screen and (min-width:1200px){.wp-block-coffee-friend-category-header-banner .banner-wrapper:not(.hide-gradient) .banner-content:before{background:var(--bgcolor,#000);bottom:0;content:"";height:100%;left:0;position:absolute;width:36%}.wp-block-coffee-friend-category-header-banner .banner-wrapper:not(.hide-gradient) .banner-content:after{background:linear-gradient(90deg,var(--bgcolor,#000) 0,transparent 100%);left:35%}.wp-block-coffee-friend-category-header-banner .banner-wrapper.hide-gradient .banner-content:after{display:none}}.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper{background:var(--bgcolor);flex-direction:column-reverse}@media screen and (min-width:1024px){.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper{flex-direction:row}}.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-content{max-width:unset;padding:24px}@media screen and (min-width:768px){.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-content{padding:32px}}@media screen and (min-width:1024px){.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-content{height:auto;justify-content:flex-start;margin-top:0;min-height:calc(min(100vw,1820px)*580/1820);position:relative;width:50%}}@media screen and (min-width:1200px){.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-content{padding:56px;width:60%}}.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-content:after,.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-content:before{content:none}.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-content .desc{order:-1}@media screen and (min-width:1024px){.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-content .btn{margin-top:auto;width:-moz-max-content;width:max-content}}.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-image{display:block}@media screen and (min-width:1024px){.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-image{align-self:flex-end;width:50%}}@media screen and (min-width:1200px){.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-image{width:40%}}.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-image:after{content:none}.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-image img{aspect-ratio:725/580;height:unset;max-width:unset;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;width:100%}@media screen and (min-width:1024px){.wp-block-coffee-friend-category-header-banner.is-style-marketing-promotion .banner-wrapper .banner-image img{-o-object-position:bottom;object-position:bottom}}.wp-block-coffee-friend-category-header-banner .banner-link{color:inherit;display:contents;text-decoration:none}