@charset "UTF-8";

/*!
 * Theme Name : Amur-Tigris_DBassets
 * Author     : Tigris inc.
 * Version    : 1.0.0
 * Description: Layout Stylesheet
 */

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

.l-container {
  width: min(
    calc(100% - (var(--container-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
}

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

.l-section {
  padding-block: var(--space-lg);
  margin-bottom: 30px;
}

.l-section--sm {
  padding-block: var(--space-md);
}

.l-section--lg {
  padding-block: var(--space-xl);
}

/*------------------------------------
  Main Layout
------------------------------------*/

.l-main {
  min-height: 60vh;
}

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

.l-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/*------------------------------------
  Footer
------------------------------------*/

.l-footer {
  padding-block: var(--space-lg);
  background-color: var(--color-main);
  color: #ffffff;
}

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

.l-grid {
  display: grid;
  gap: var(--space-md);
}

.l-grid--2,
.l-grid--3,
.l-grid--4 {
  grid-template-columns: 1fr;
}

/*------------------------------------
  Flex
------------------------------------*/

.l-flex {
  display: flex;
}

.l-flex--center {
  align-items: center;
  justify-content: center;
}

.l-flex--between {
  align-items: center;
  justify-content: space-between;
}

/*------------------------------------
  Desktop
------------------------------------*/

@media screen and (min-width: 768px) {

  .l-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .l-grid--3 {
    grid-template-columns: repeat(4, 1fr);
  }

  .l-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

}