@import '../../scss/mixin';

.wideCard {}

.wideCardWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: size(5);

  @include bpd(sm) {
    grid-template-columns: 1fr;
  }
}

.wideCardContent {
  padding: 0 size(8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: size(2);
}

.wideCardSwitch {
  .wideCardMedia {
    order: 2;

    @include bpd(sm) {
      order: 1;
    }
  }

  .wideCardContent {
    @include bpd(sm) {
      order: 2;
    }
  }
}

.btnOutline {
  @include btnOutline();
  padding: 18px 36px;
  margin-top: 12px;
}
