/*=========================================================
  THE SPOILED CHEF
  LAYOUT
=========================================================*/

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

.container{

    width:min(100% - (var(--container-padding) * 2), var(--container-width));

    margin-inline:auto;

}

.container-fluid{

    width:100%;

    padding-inline:var(--container-padding);

}

/*=========================================================
  SECTIONS
=========================================================*/

.section{

    padding-block:var(--space-96);

}

.section-sm{

    padding-block:var(--space-64);

}

.section-lg{

    padding-block:var(--space-120);

}

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

.grid{

    display:grid;

    gap:var(--space-32);

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

.grid-auto{

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

}

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

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.gap-8{gap:var(--space-8);}
.gap-12{gap:var(--space-12);}
.gap-16{gap:var(--space-16);}
.gap-20{gap:var(--space-20);}
.gap-24{gap:var(--space-24);}
.gap-32{gap:var(--space-32);}
.gap-40{gap:var(--space-40);}
.gap-48{gap:var(--space-48);}

/*=========================================================
  WIDTH
=========================================================*/

.w-100{

    width:100%;

}

.max-600{

    max-width:600px;

}

.max-700{

    max-width:700px;

}

.max-800{

    max-width:800px;

}

.max-900{

    max-width:900px;

}

/*=========================================================
  HEIGHT
=========================================================*/

.h-100{

    height:100%;

}

.min-vh-100{

    min-height:100vh;

}

/*=========================================================
  DISPLAY
=========================================================*/

.block{

    display:block;

}

.inline{

    display:inline;

}

.inline-block{

    display:inline-block;

}

.hidden{

    display:none;

}

/*=========================================================
  POSITION
=========================================================*/

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.fixed{

    position:fixed;

}

/*=========================================================
  OVERFLOW
=========================================================*/

.overflow-hidden{

    overflow:hidden;

}

.overflow-auto{

    overflow:auto;

}

/*=========================================================
  SPACING
=========================================================*/

.mt-0{margin-top:0;}
.mt-8{margin-top:var(--space-8);}
.mt-16{margin-top:var(--space-16);}
.mt-24{margin-top:var(--space-24);}
.mt-32{margin-top:var(--space-32);}
.mt-40{margin-top:var(--space-40);}
.mt-48{margin-top:var(--space-48);}
.mt-64{margin-top:var(--space-64);}

.mb-0{margin-bottom:0;}
.mb-8{margin-bottom:var(--space-8);}
.mb-16{margin-bottom:var(--space-16);}
.mb-24{margin-bottom:var(--space-24);}
.mb-32{margin-bottom:var(--space-32);}
.mb-40{margin-bottom:var(--space-40);}
.mb-48{margin-bottom:var(--space-48);}
.mb-64{margin-bottom:var(--space-64);}

.pt-32{padding-top:var(--space-32);}
.pb-32{padding-bottom:var(--space-32);}

.py-64{

    padding-block:var(--space-64);

}

.py-96{

    padding-block:var(--space-96);

}

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

.card{

    background:var(--color-surface);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    overflow:hidden;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

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

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-contain{

    width:100%;

    height:100%;

    object-fit:contain;

}

/*=========================================================
  DIVIDER
=========================================================*/

.divider{

    width:100%;

    height:1px;

    background:var(--color-border);

}

/*=========================================================
  ASPECT RATIOS
=========================================================*/

.ratio-1x1{

    aspect-ratio:1/1;

}

.ratio-4x3{

    aspect-ratio:4/3;

}

.ratio-16x9{

    aspect-ratio:16/9;

}

.ratio-3x4{

    aspect-ratio:3/4;

}

/*=========================================================
  Z INDEX HELPERS
=========================================================*/

.z-1{z-index:1;}
.z-10{z-index:10;}
.z-100{z-index:100;}
.z-1000{z-index:1000;}