:root {
  --clamp128: clamp(96px, 9vw, 128px);
  --clamp96: clamp(72px, 6vw, 96px);
  --clamp72: clamp(64px, 5.3vw, 72px);
  --clamp64: clamp(48px, 4vw, 64px);
  --clamp48: clamp(32px, 2.6vw, 48px);
  --clamp32: clamp(24px, 2.3vw, 32px);
  --clamp24: clamp(16px, 1.9vw, 24px);
  --clamp16: clamp(15px, 1.4vw, 16px);
}

.devcafe-block-01 {
  display: block;
  width: 100%;
  position: relative;
}
.devcafe-block-01 figcaption {
  display: grid;
  place-content: center;
  background-color: black;
  color: white;
  padding: var(--clamp32) var(--clamp48);
  width: fit-content;
  position: absolute;
  top: 40px;
  left: -40px;
}
.devcafe-block-01 div {
  display: grid;
  place-content: center;
  flex-basis: 50%;
  flex-shrink: 1;
  flex-basis: 1;
}

.devcafe-block-01 img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 10;
}
.devcafe-block-02 {
  display: flex;
  gap: var(--clamp24);
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.devcafe-block-02 figcaption {
  flex-basis: 50%;
  display: grid;
  place-content: center;
  flex-shrink: 1;
  flex-basis: 1;
}
.devcafe-block-02 div {
  flex-basis: 50%;
  flex-shrink: 1;
  flex-basis: 1;
}
.devcafe-block-02 img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 10;
}
.devcafe-block-03 {
  display: flex;
  gap: var(--clamp24);
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.devcafe-block-03 figcaption {
  flex-basis: 50%;
  display: grid;
  place-content: center;
  flex-shrink: 1;
  flex-basis: 1;
}
.devcafe-block-03 div {
  flex-basis: 50%;
  flex-shrink: 1;
  flex-basis: 1;
}
.devcafe-block-03 img {
  object-fit: cover;
  width: 100%;
  aspect-ratio: 16 / 10;
}