/* ==========================================================
   HERITAGE COLLECTION™
   GRID SYSTEM
========================================================== */

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

.grid{

    display:grid;

}

.grid-2{

    display:grid;

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

    gap:40px;

}

.grid-3{

    display:grid;

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

    gap:40px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:32px;

}

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

.hero-grid{

    display:grid;

    grid-template-columns:58% 42%;

    align-items:center;

    gap:90px;

}

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

.auto-grid{

    display:grid;

    grid-template-columns:

    repeat(

        auto-fit,

        minmax(320px,1fr)

    );

    gap:36px;

}

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

.card-grid{

    display:grid;

    grid-template-columns:

    repeat(

        auto-fill,

        minmax(340px,1fr)

    );

    gap:32px;

}

/* ==========================================================
   FLEX HELPERS
========================================================== */

.flex{

    display:flex;

}

.inline-flex{

    display:inline-flex;

}

.items-center{

    align-items:center;

}

.items-start{

    align-items:flex-start;

}

.items-end{

    align-items:flex-end;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-end{

    justify-content:flex-end;

}

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.gap-8{

    gap:8px;

}

.gap-12{

    gap:12px;

}

.gap-16{

    gap:16px;

}

.gap-24{

    gap:24px;

}

.gap-32{

    gap:32px;

}

.gap-40{

    gap:40px;

}

.gap-64{

    gap:64px;

}

/* ==========================================================
   ALIGNMENT
========================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1200px){

    .hero-grid{

        grid-template-columns:1fr;

        gap:70px;

    }

}

@media (max-width:992px){

    .grid-4{

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

    }

    .grid-3{

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

    }

}

@media (max-width:768px){

    .grid-2,

    .grid-3,

    .grid-4,

    .hero-grid,

    .auto-grid,

    .card-grid{

        grid-template-columns:1fr;

    }

    .gap-64{

        gap:40px;

    }

}