/*==================================
BREWIKA COLLECTION V2
PART 1
==================================*/

:root{

--red:#d60000;
--green:#13834c;
--dark:#222;
--gray:#666;
--bg:#f6f6f6;
--white:#fff;

}

.brew-collection{

position:relative;

padding:120px 0;

background:#f7f7f7;

overflow:hidden;

}

/*==========================
CONTAINER
==========================*/

.collection-container{

width:min(1450px,92%);

margin:auto;

}

/*==========================
HEADER
==========================*/

.collection-head{

display:flex;

justify-content:space-between;

align-items:flex-end;

margin-bottom:65px;

gap:30px;

}

.collection-head span{

display:inline-block;

padding:10px 22px;

border-radius:40px;

background:#fff;

color:var(--red);

font-size:13px;

font-weight:700;

letter-spacing:2px;

margin-bottom:20px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.collection-head h2{

font-size:clamp(50px,5vw,82px);

line-height:.92;

font-weight:800;

color:#222;

}

.collection-head a{

display:flex;

align-items:center;

justify-content:center;
text-decoration:none;
width:150px;

height:56px;

border-radius:50px;

background:#fff;

color:#222;

font-weight:700;

transition:.35s;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.collection-head a:hover{

background:var(--red);

color:#fff;

}

/*==========================
GRID
==========================*/

.collection-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

/*==========================
CARD
==========================*/

.brew-card{

position:relative;

background:#fff;

border-radius:34px;

overflow:hidden;

min-height:650px;

box-shadow:

0 18px 45px rgba(0,0,0,.07);

transition:.45s;

display:flex;

flex-direction:column;

}

.brew-card:hover{

transform:translateY(-14px);

box-shadow:

0 40px 90px rgba(0,0,0,.14);

}
/*==================================
BREWIKA COLLECTION V2
PART 2
==================================*/

/*==========================
IMAGE AREA
==========================*/

.card-image{

position:relative;

flex:1;

display:flex;

align-items:center;

justify-content:center;

padding:0;

overflow:hidden;

}

/*==========================
RED + GREEN GLOW
==========================*/

.card-image::before{

content:"";

position:absolute;

width:380px;

height:380px;

border-radius:50%;

background:
radial-gradient(circle,
rgba(214,0,0,.12) 0%,
rgba(19,131,76,.10) 45%,
transparent 72%
);

filter:blur(20px);

transition:.6s;

}

.brew-card:hover .card-image::before{

transform:scale(1.18);

opacity:1;

}

/*==========================
PRODUCT IMAGE
==========================*/

.card-image img{

width:100%;


height:100%;

object-fit:cover;

transition:.5s ease;

filter:drop-shadow(0 35px 60px rgba(0,0,0,.25));

}

/*==========================
FLOAT
==========================*/

@keyframes brewFloat{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-12px);

}

}

/*==========================
HOVER
==========================*/

.brew-card:hover .card-image img{

transform:

translateY(-16px)
scale(1.08)
rotate(-4deg);

filter:

drop-shadow(
0 45px 70px rgba(214,0,0,.28)
);

}

/*==========================
BOTTOM SHADOW
==========================*/

.card-image::after{

content:"";

position:absolute;

bottom:18px;

left:50%;

transform:translateX(-50%);

width:170px;

height:24px;

background:rgba(0,0,0,.12);

filter:blur(18px);

border-radius:50%;

transition:.5s;

}

.brew-card:hover .card-image::after{

width:210px;

opacity:.7;

}

/*==========================
TOP LINE
==========================*/

.brew-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
#d60000,
#13834c
);

transform:scaleX(0);

transform-origin:left;

transition:.45s;

}

.brew-card:hover::before{

transform:scaleX(1);

}
/*==================================
BREWIKA COLLECTION V2
PART 3
==================================*/

/*==========================
BOTTOM CAPTION
==========================*/

.card-caption{

position:relative;

padding:26px 30px 30px;

background:#fff;

border-top:1px solid rgba(0,0,0,.05);

transition:.4s;

}

.brew-card:hover .card-caption{

background:#fcfcfc;

}

/* Category */

.card-caption span{

display:inline-block;

font-size:11px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

color:#d60000;

margin-bottom:12px;

}

/* Title */

.card-caption h3{

font-size:30px;

font-weight:800;

line-height:1.15;

color:#222;

margin-bottom:18px;

transition:.35s;

}

.brew-card:hover .card-caption h3{

color:#d60000;

}

/* Explore */

.card-caption p{

display:inline-flex;

align-items:center;

gap:10px;

font-size:15px;

font-weight:700;

color:#13834c;

transition:.35s;

cursor:pointer;

}

.card-caption p::after{

content:"→";

transition:.35s;

}

.brew-card:hover .card-caption p{

letter-spacing:1px;

}

.brew-card:hover .card-caption p::after{

transform:translateX(8px);

}
/*==========================
1050px
==========================*/

@media (max-width:1050px){

.collection-container{

width:94%;

}

.collection-grid{

grid-template-columns:repeat(2,1fr);

gap:24px;

}

.brew-card{

min-height:700px;

}

.card-image{

height:350px;

padding:25px 20px 0;

}

.card-image img{
width:100%;

max-width:100%;

height:100%;

object-fit:cover;

}

.card-caption{

padding:22px;

}

.card-caption h3{

font-size:24px;

}

.card-caption p{

font-size:14px;

}

}
/*==========================
767px
==========================*/

@media(max-width:767px){

.collection-grid{

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.collection-head{

display:block;

margin-bottom:40px;

}

.collection-head h2{

font-size:42px;

margin-top:15px;

}

.collection-head a{

margin-top:20px;

width:180px;

height:48px;

}

.brew-card{

min-height:430px;

border-radius:22px;

}

.card-image{

padding:20px 15px 0;

}

.card-image img{

width:88%;

max-width:210px;

}

.card-caption{

padding:18px;

}

.card-caption h3{

font-size:21px;

}

.card-caption p{

font-size:13px;

}

}

/*==========================
480px
==========================*/

@media(max-width:480px){

.brew-collection{

padding:70px 0;

}

.collection-container{

width:92%;

}

.collection-head{

text-align:left;

}

.collection-head h2{

font-size:30px;

}

.collection-head span{

font-size:10px;

padding:7px 14px;

}

.collection-head a{

width:100%;

height:44px;

font-size:13px;

}

.collection-grid{

grid-template-columns:repeat(2,1fr);

gap:12px;

}

.brew-card{

min-height:300px;

border-radius:16px;

}

.card-image{

padding:15px 10px 0;

}

.card-image img{

width:92%;

max-width:140px;

}

.card-image::before{

width:180px;

height:180px;

}

.card-caption{

padding:14px;

}

.card-caption span{

font-size:9px;

margin-bottom:6px;

}

.card-caption h3{

font-size:16px;

margin-bottom:8px;

}

.card-caption p{

font-size:11px;

}

  }