@use '../../base/variable';
@use '../../base/token';
@use '../../abstract';

.cds-tabs-layout-01 {
  $gap: 32px; // content left 여백
  $width: 576px;
  $this: &;
  padding-inline: variable.$gap-sm;

  display: flex;
  flex-direction: column;
  gap: 48px;

  &__list {
    order: 2;
  }

  &__media {
    order: 1;
    margin-inline: -#{variable.$gap-sm};

    img {
      width: 100%;
      max-width: 100%;
      vertical-align: top;
    }
  } // media

  @include abstract.media-bp-up('md') {
    $width-column: 576px;
    $width-wrap: variable.$max-width - ((variable.$gap-sm * 2) * 2);

    flex-direction: initial;
    align-items: center;
    max-width: variable.$max-width;
    margin-inline: auto;
    gap: 64px;
    padding-inline: variable.$gap-sm * 2;

    &__list {
      order: initial;
      width: calc($width-column / $width-wrap * 100%);
    }

    &__media {
      order: initial;
      width: calc($width-column / $width-wrap * 100%);
      margin-inline: 0;
      overflow: hidden;

      img {
        border-radius: 24px;
      }
    }
  } // md
}