:root {
  --mobile: 320px;
  --mobile-margin: 0 20px;

  --tablet-portrait: 768px;
  --tablet-portrait-margin: 0 20px;

  --tablet-landscape: 1024px;
  --tablet-landscape-margin: 0 36px;

  --desktop: 1280px;
  --desktop-margin: 0 44px;

  --large-desktop: 1920px;
  --large-desktop-margin: 0 112px;
}
.padding-container {
  padding-top: 20px;
  padding-bottom: 20px;
}

.small-padding-container {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-bottom-container {
  padding-bottom: 20px;
}

.padding-top-container {
  padding-top: 20px;
}

.mobile-padding-bottom {
  padding-bottom: 40px;
}

@media only screen and (min-width: 640px) {
  .mobile-padding-bottom {
    padding-bottom: unset;
  }
}

.main-container {
  max-width: var(--mobile);
  margin: var(--mobile-margin);
}

.center-container {
  max-width: var(--mobile);
  margin-left: auto;
  margin-right: auto;
}

.flex-container {
  display: flex;

  gap: 20px;
}

.flex-margin {
  margin-left: 40px;
  margin-right: 40px;
}

.two-flex-child {
  flex-basis: 50%;
}

@media only screen and (min-width: 321px) {
  .main-container {
    max-width: var(--tablet-portrait);
    margin: var(--tablet-portrait-margin);
  }

  .center-container {
    max-width: var(--tablet-portrait);
  }
}

@media only screen and (min-width: 769px) {
  .main-container {
    max-width: var(--tablet-landscape);
    margin: var(--tablet-landscape-margin);
  }

  .center-container {
    max-width: var(--tablet-landscape);
  }
}

@media only screen and (min-width: 1025px) {
  .padding-container {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .padding-bottom-container {
    padding-bottom: 32px;
  }

  .padding-top-container {
    padding-top: 32px;
  }

  .main-container {
    max-width: var(--desktop);
    margin: var(--desktop-margin);
  }

  .center-container {
    max-width: var(--desktop);
  }

  .flex-container {
    display: flex;
    gap: 32px;
  }

  .flex-margin {
    margin-left: 64px;
    margin-right: 64px;
  }
}

@media only screen and (min-width: 1281px) {
  .main-container {
    max-width: var(--large-desktop);
    margin: var(--desktop-margin);
  }

  .center-container {
    max-width: var(--large-desktop);
  }
}

@media only screen and (min-width: 1440px) {
  .main-container {
    max-width: var(--large-desktop);
    margin: var(--large-desktop-margin);
  }
}

.overflow-hidden {
  overflow: hidden;
}