.career{
  background: var(--surface-strong);
  border: .0625rem solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.8vw, 1.5rem);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06);

  position: relative;
  
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1rem, 2.6vw, 1.75rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-block: clamp(1rem, 3vw, 2rem);
  min-block-size: clamp(28rem, 70vh, calc(100svh - var(--header-h)));
  align-content: center;
  align-items:center;
}

.career::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-strong);
  border: .0625rem solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.06);
}

.career .card{ background: transparent; border: 0; box-shadow: none; padding: 0; }

.career-text{ display: grid; gap: clamp(.6rem, 2vw, 1rem); }
.career-text h1{ font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.25; margin: 0; }
.career-text p{ margin: 0; }
.career-text .btn{ border-radius: 999px; padding: .7rem 1.1rem; }

.career-media{ margin: 0; display: grid; }
.career-media img{ inline-size: 100%; block-size: 100%; object-fit: cover; display: block; border-radius: .75rem; }

@media (orientation: portrait){
  .career{ grid-template-columns: 1fr; gap: clamp(.75rem, 2.4vw, 1.25rem); padding: clamp(.75rem, 2.5vw, 1.25rem); min-block-size: auto; align-content: start; }
  .career-media{ min-block-size: clamp(12rem, 55vw, 22rem); }
  
}