/* ----------------------------------
Archive Container
---------------------------------- */
.one-container .site-content {
    padding-top: 20px !important;
}
.companions-archive{
max-width:1240px;
margin:0 auto;
padding:0px 24px 80px;
}

/* ----------------------------------
Breadcrumbs
---------------------------------- */

.agency-breadcrumbs{
margin-bottom:20px;
font-size:16px;
color:#777;
}

.agency-breadcrumbs a{
text-decoration:none;
}

.breadcrumb-sep{
margin:0 6px;
}

/* ----------------------------------
Header
---------------------------------- */

.archive-header h1{
margin-bottom:22px;
font-size:36px;
}

.archive-hero{
position:relative;
margin-bottom:40px;
overflow:hidden;
width:100vw;

margin-left:calc(-50vw + 50%);
}

.archive-hero img{
width:100%;
height:400px;
object-fit:cover;
display:block;
}


/* overlay */

.archive-hero-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to bottom,
rgba(0,0,0,.25),
rgba(0,0,0,.65)
);
}

.archive-hero-content{
position:absolute;
bottom:50px;
left:50px;
color:#fff;
max-width:620px;
}

.archive-hero-title{
margin:0;
font-size:42px;
font-weight:600;
}


/* ----------------------------------
Intro Text
---------------------------------- */

.term-intro{
margin:30px 0 0px;
max-width:880px;
font-size:17px;
line-height:1.75;
}

.companions-section-title{
margin-bottom:30px;
margin-top:40px;
font-size:26px;
}


/* ----------------------------------
Grid Layout
---------------------------------- */

.companions-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:50px 36px;
margin-top:50px;
}

/* ----------------------------------
Card
---------------------------------- */

.companion-card{
position:relative;
}

.companion-card-link{
display:block;
text-decoration:none;
color:#fff;
position:relative;
}

.companion-card-link:hover{
color:#fff;
}
/* ----------------------------------
Image
---------------------------------- */

.companion-card-image{
position:relative;
overflow:hidden;
aspect-ratio:3/4;
background:#f2f2f2;
}

.companion-card-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .45s ease;
}


/* luxury gradient */

.companion-card-image:after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:40%;
background:linear-gradient(
to top,
rgba(0,0,0,.9),
rgba(0,0,0,0)
);
pointer-events:none;
}


/* hover */

.companion-card:hover .companion-card-img{
transform:scale(1.06);
}

/* badge */

.tier-badge{
position:absolute;
bottom:18px;
right:0px;
font-size:10px;
letter-spacing:1px;
text-transform:uppercase;
padding:6px 12px;
background:#000;
color:#fff;
z-index:3;
}


/* ----------------------------------
Overlay Text
---------------------------------- */

.companion-card-body{
position:absolute;
bottom:18px;
left:20px;
right:20px;
text-align:left;
z-index:2;
}


/* name */

.companion-card-title{
font-size:24px;
margin:0;
line-height:1.2;
font-weight:500;
letter-spacing:.3px;
font-family: sans-serif;
}


/* location */

.companion-card-location{
font-size:14px;
margin-top:3px;
opacity:.9;
}

/* ----------------------------------
Description Block
---------------------------------- */

.term-description{
max-width:760px;
margin:90px auto 0;
line-height:1.75;
}


/* ----------------------------------
Tablet
---------------------------------- */

@media (max-width:1024px){

.companions-grid{
grid-template-columns:repeat(2,1fr);
gap:40px 28px;
}

.archive-hero img{
height:380px;
}

.archive-hero-title{
font-size:34px;
}

}


/* ----------------------------------
Mobile
---------------------------------- */

@media (max-width:768px){

.companions-grid{
grid-template-columns:1fr;
gap:36px;
}

.companions-archive{
padding:30px 16px 60px;
}

.archive-hero img{
height:300px;
}

.archive-hero-content{
left:24px;
bottom:24px;
}

.archive-hero-title{
font-size:26px;
}

}


/* ----------------------------------
Small Mobile
---------------------------------- */

@media (max-width:480px){

.companions-grid{
grid-template-columns:1fr;
}

}