/**
 * @file
 * Is the responsive layout composition.
 *
 * Is intented to set basic layout rules to regions and global blocks.
 * Also add grid common rules.
 */



/**
 * Layout content
 */

.layout-container {
  padding-top: 95px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main__content {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
}
@media all and (min-width: 800px) {
  .layout-container {
    padding-top: 0;
  }
}

.mobile-hidden {
  display: none;
}
@media all and (min-width: 800px) {
  .mobile-hidden {
    display: block;
  }
}

.hidden {
  display: none;
}

/**
 * Grid row
 */

.section { 
  overflow: hidden;
}

.grid-row {
	padding: 0 1.5rem;
}
.grid-row--no-padding {
	padding: 0;
}

@media all and (min-width: 700px) {
  .grid-row {
  	padding: 0;
    width: 90%;
    margin: 0 auto;
  }
  .grid-row--12{
    max-width: 1520px;
  }
  .grid-row--10{
    max-width: 1262px;
  }
  .grid-row--8{
    max-width: 1004px;
  }
  .grid-row--6{
    max-width: 745px;
  }
}
@media all and (min-width: 800px) {
  .grid-row-menu {
  	padding: 0;
    width: 90%;
    margin: 0 auto;
    max-width: 1520px;
  }
}

/**
 * Grid Wrapper
 */

.grid-wrapper {
  display: grid;
  gap: 1rem;
}
@media all and (min-width: 1000px) {
  .grid-wrapper {
      gap: 2rem;
  }
}

.grid-wrapper--2,
.grid-wrapper--4,
.grid-wrapper--6 {
  grid-template-columns: repeat(1, 1fr);
  justify-items: center;
}
@media all and (min-width: 600px) {
  .grid-wrapper--2,
  .grid-wrapper--4,
  .grid-wrapper--6 {
    grid-template-columns: repeat(2, calc(50% - 0.9125rem));
    gap: 1.875rem;
  }
}
@media screen and (min-width: 1000px) {
  .grid-wrapper--4,
  .grid-wrapper--6 {
    grid-template-columns: repeat(3, calc(33% - 0.9125rem));
  }
}
@media screen and (min-width: 1200px) {
  .grid-wrapper--6 {
    grid-template-columns: repeat(4, calc(25% - 1.4rem));
  }
}
@media screen and (min-width: 1400px) {
  .grid-wrapper--4 {
    grid-template-columns: repeat(4, calc(25% - 0.9125rem));
  }
  .grid-wrapper--6 {
    grid-template-columns: repeat(6, calc(16.666% - 1.5666rem));
  }
}

/**
 * Vertical spacing
 */

.top-spacing--xs {
 margin-top: .25rem;
}
.top-spacing--s{
 margin-top: .5rem;
}
.top-spacing--m {
 margin-top: 1rem;
}
.top-spacing--l {
 margin-top: 2rem;
}
.top-spacing--xl,
.top-spacing--xxl {
 margin-top: 4rem;
}
.top-spacing--xxxl {
  margin-top: 5rem;
}
.bottom-spacing--xs {
 margin-bottom: .25rem;
}
.bottom-spacing--s {
 margin-bottom: .5rem;
}
.bottom-spacing--m {
 margin-bottom: 1rem;
}
.bottom-spacing--l {
 margin-bottom: 2rem;
}
.bottom-spacing--xl,
.bottom-spacing--xxl{
 margin-bottom: 4rem;
}
.bottom-spacing--xxxl{
  margin-bottom: 5rem;
}
@media all and (min-width: 900px) {
  .top-spacing--xxl {
    margin-top: 6rem;
  }
  .top-spacing--xxxl {
    margin-top: 8rem;
  }
  .bottom-spacing--xxl{
    margin-bottom: 6rem;
  }
  .bottom-spacing--xxxl{
    margin-bottom: 8rem;
  }
}
@media all and (min-width: 1300px) {
  .top-spacing--xs {
    margin-top: .33rem;
  }
  .bottom-spacing--xs {
    margin-bottom: .33rem;
  }
}


/**
 * Alignment
 */

 .alignment--end .layout__region{
  align-self: end;
 }
 .alignment--center .layout__region{
  align-self: center;
 }
 .alignment--start .layout__region{
  align-self: start;
 }
.layout--twocol {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media all and (min-width: 900px) {
  .layout--twocol {
    display: grid;
    gap: 1.875rem;
  }
}