/*==========================
Section
==========================*/

.ads-section{
    margin:0 auto;
}

.ads-header{
    text-align:center;
    max-width:700px;
    margin:auto auto 45px;
}

.ads-subtitle{
    display:inline-block;

    padding:8px 18px;

    background:#eef4ff;

    color:var(--primary);

    border-radius:30px;

    font-size:.9rem;

    font-weight:700;
}

.ads-title{
    margin:18px 0 12px;

    font-size:2.2rem;

    color:var(--text);
}

.ads-description{
    color:#666;

    line-height:2;

    font-size:1rem;
}

/*==========================
Grid
==========================*/

#advertisements-container{

    display:grid;

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

    gap:30px;
}

/*==========================
Card
==========================*/

.advertisement-container{

    border-radius:24px;

    overflow:hidden;

    background:#fff;

    border:1px solid var(--border);

    transition:.35s;

    box-shadow:0 10px 35px rgba(0,0,0,.06);
}

.advertisement-container:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.12);
}

.advertisement-container a{

    display:block;

    color:inherit;

    text-decoration:none;
}

/*==========================
Image
==========================*/

.ad-image{

    overflow:hidden;
}

.ad-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.45s;
}

.advertisement-container:hover img{

    transform:scale(1.06);
}

/*==========================
Content
==========================*/

.ad-content{

    padding:22px;
}

.ad-category{

    display:inline-block;

    background:#eef4ff;

    color:var(--primary);

    padding:6px 14px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:16px;
}

.ad-content h3{

    font-size:1.25rem;

    margin-bottom:14px;

    color:var(--text);
}

.ad-content p{

    color:#666;

    line-height:2;

    min-height:75px;
}

.ad-button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    color:var(--primary);

    font-weight:700;

    transition:.25s;
}

.advertisement-container:hover .ad-button{

    transform:translateX(-6px);
}

/*==========================
Tablet
==========================*/

@media(max-width:992px){

#advertisements-container{

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

}

}

/*==========================
Mobile
==========================*/

@media(max-width:768px){

.ads-section{

margin-top:50px;

}

.ads-title{

font-size:1.7rem;

}

.ads-description{

font-size:.95rem;

}

#advertisements-container{

grid-template-columns:1fr;

gap:20px;

}

.ad-image img{

height:210px;

}

.ad-content{

padding:18px;

}

.ad-content h3{

font-size:1.1rem;

}

.ad-content p{

font-size:.92rem;

min-height:auto;

}

.ad-button{

width:100%;

justify-content:center;

padding:12px;

border-radius:12px;

background:var(--primary);

color:#fff;
}

.advertisement-container:hover .ad-button{

transform:none;
}

}