@import '../../themes/default/breakpoints.module.scss';

.dry-content-section {
  gap: 48px;
  display: flex;
  padding: 64px 0px;
  align-items: center;
  align-self: stretch;
  flex-direction: column;

  & > &__container {
    gap: 32px;
    display: flex;
    padding: 0px 16px;
    align-self: stretch;
    align-items: flex-start;

    /* Column order on mobile */
    &--mobile-column {
      flex-direction: column;
    }

    &--mobile-column-reverse {
      flex-direction: column-reverse;
    }
  }

  &__column1,
  &__column2 {
    width: 100%;
  }

  @media screen and (min-width: $desktop-min) {
    gap: 64px;
    padding: 96px 0px;
    justify-content: center;

    & > &__container {
      gap: 64px;
      margin: 0 auto;
      padding: 0px 32px;
      align-items: center;
      justify-content: center;

      /* Override column order on mobile */
      &--mobile-column {
        flex-direction: row;
      }

      &--mobile-column-reverse {
        flex-direction: row;
      }
    }

    &__column1,
    &__column2 {
      width: unset;
    }
  }
}