Scss

.product-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  container-type: inline-size; /* コンテナタイプを設定 */
}

/* @containerを使って、クエリを設定 */
/* 幅が500px以上のときのスタイル */
@container (width >= 500px) {
  .product-card {
    background-color: lightblue; /* 背景色を青に変更 */
    flex-basis: calc(33.333% - 10px); /* 幅を変更 */
    font-size: initial; /* フォントサイズをリセット */
  }
}

/* 1.レイヤー名を定義する */
@layer レイヤー1, レイヤー2;

/* 2.レイヤーを利用する */
@layer レイヤー1 {
  /*任意のスタイルを記述する*/
}

@layer レイヤー2 {
  /*任意のスタイルを記述する*/
}

<ul class="flex">
  <li>
    <img src="https://placehold.jp/200x200.png" />
    <p>
      タイトルがはいります。タイトルがはいります。タイトルがはいります。タイトルがはいります。タイトルがはいります。
    </p>
  </li>
  <li>
    <img src="https://placehold.jp/200x200.png" />
    <p>
      タイトルがはいります。タイトルがはいります。タイトルがはいります。タイトルがはいります。タイトルがはいります。
    </p>
  </li>
</ul>

.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  > li {
    width: calc(100% / 4 - 60px / 4);
    outline: solid 1px;

    > img {
      width: 100%;
    }
  }
}

@mixin row-items($gap, $count) {
  display: flex;
  flex-wrap: wrap;
  gap: $gap;

  > li {
    width: calc(100% / $count - ($gap * ($count - 1) / $count));
  }
}

.flex {
  @include row-items(20px, 4);

  > li {
    outline: solid 1px;

    > img {
      width: 100%;
    }
  }
}

:root {
  --z-index-header: 100;
  --z-index-modal: 200;
}

.modal {
  position: relative;
  z-index: var(--z-index-modal);
}

.header {
  position: relative;
  z-index: var(--z-index-header);
}

li:not(:last-of-type) {
  border-bottom: 4px dotted tomato;
}

.sample {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: N;
  overflow: hidden;
}

$btn-sizes: (
  sm: 20px,
  md: 30px,
  lg: 40px,
);
@each $modifier, $size in $btn-sizes {
  .btn--#{$modifier} {
    width: $size;
    height: $size;
  }
}

$breakpoints: (
  sm: 768px,
  md: 992px,
  lg: 1200px,
);
@debug map-get($breakpoints, lg); //1200px

.container {
  container-type: inline-size;
}

.grid {
  display: block grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: clamp(8px, 2cqi, 16px);
}

:root {
  --font-weight-thin: 100;
  --font-weight-semi-bold: 600;
  --font-weight-black: 900;
}

p {
  font-weight: var(--font-weight-semi-bold);
}

.container {
  container-type: inline-size;
}

.flex {
  --_column: 2;
  --_gap: clamp(8px, 2cqi, 16px);

  display: block flex;
  flex-wrap: wrap;
  gap: var(--_gap);

  @container (480px <= inline-size) {
    --_column: 3;
  }

  & > * {
    flex-basis: calc((100% - var(--_gap) * (var(--_column) - 1)) / var(--_column));
  }
}

.container {
  container-type: inline-size;
}

.grid {
  --_column: 2;

  display: block grid;
  grid-template-columns: repeat(var(--_column), 1fr);
  gap: clamp(8px, 2cqi, 16px);

  @container (480px <= inline-size) {
    --_column: 3;
  }
}

.grid {
  --_gap: clamp(8px, 2cqi, 16px);

  display: grid;
  gap: var(--_gap);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}