/* ===========================================================
   LAYOUT 레이아웃 구조, 페이지 뼈대
=========================================================== */

/* --------------------------------------------------------------------------
   Container
--------------------------------------------------------------------------- */

.layout {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.layout-md {
  max-width: 120rem;
}

.layout-sm {
  max-width: 96rem;
}

/* @media (min-width:768px) {
  .layout {
    padding-inline: 2rem;
  }
} */

/* --------------------------------------------------------------------------
   Section
--------------------------------------------------------------------------- */

.section {
  padding-block: var(--section-padding);
}

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

.grid {
  display: grid;
}

.grid-center {
  display: grid;
  place-items: center;
}

/* --------------------------------------------------------------------------
   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;
}

/* --------------------------------------------------------------------------
   Common Width
--------------------------------------------------------------------------- */

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

/* --------------------------------------------------------------------------
   Overflow
--------------------------------------------------------------------------- */

.overflow-hidden {
  overflow: hidden;
}