.main-section {
  padding: 120px 0;
}

.main-section.bottom-0 {
  padding-bottom: 0;
}

.main-section.top-0 {
  padding-top: 0;
}

.main-section.dark {
  background-color: #111;
  padding: 65px 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 90vw;
  max-width: 1920px;
  margin: 0 auto;
  column-gap: 40px;
  row-gap: 40px;
}

.container-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
  row-gap: 40px;
}

.padding-0 {
  padding: 0;
}

.overflow-hidden {
  overflow: hidden;
}

.mobile {
  display: none;
}

.row-2 {
  grid-row: span 2;
}

.container__column {
  grid-column: span 1;
}

.container__first-column-reverse-row-1 {
  grid-area: 1/2/1/4;
}

.container__second-column-reverse-row-1 {
  grid-area: 1/1/1/1;
}

.container__first-column-reverse-row-2 {
  grid-area: 2/2/2/4;
}

.container__second-column-revers-2 {
  grid-area: 2/1/2/1;
}

.container__column-start-2 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.container__column-2 {
  grid-column: span 2;
}

.row-3 {
  grid-row: span 3;
}

.container__column-full {
  grid-column: span 3;
}

.container__first-column {
  grid-column: span 1;
}

.container__second-column {
  grid-column: span 1;
}

.container__second-column-full {
  grid-column: span 2;
}

.container__second-column-full.row-2 {
  grid-row: span 2;
}

.container__second-column-full.row-3 {
  grid-row: span 3;
}

.container__third-column {
  grid-column: span 1;
}

.content__bottom {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

@media screen and (min-width: 1920px) {
  .container {
    column-gap: 40px;
  }
}

@media screen and (max-width: 991px) {
  .main-section {
    padding: 80px 0;
  }

  .container__column,
  .container__column-2 {
    grid-column: span 3;
  }

  .container__column-start-2 {
    grid-column-start: 1;
    grid-column: span 3;
  }

  .container__first-column,
  .container__second-column-full {
    grid-column: span 3;
  }

  .container__first-column-reverse-row-1 {
    grid-area: 2/1/2/4;
  }

  .container__first-column-reverse-row-2 {
    grid-area: 3/1/3/4;
  }

  .container__second-column-reverse-row-1 {
    grid-area: 1/1/1/4;
  }

  .container__second-column-reverse-row-2 {
    grid-area: 2/1/2/4;
  }
}

@media screen and (max-width: 767px) {
  .mobile__column-full {
    grid-column: span 3;
  }

  .mobile {
    display: block;
  }
}

@media screen and (max-width: 479px) {
  .main-section {
    padding: 64px 0;
  }
}
