how to create this background frame to the card using html and css

enter image description here how to create this card having this brown and yellow colored frame

thanks in advance

i tried with css border with this code but it is only creating brown part, i am not able to create yellow part of the frame

.card {
  background-color: var(--background);
  display: block;
  width: 300px;
  min-height: 90px;
  cursor: pointer;
  padding: 15px;
  margin: calc(50vh - 30px) auto 0 auto;
  border: 3px solid var(--primary);
  box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green);
}

is it ok for you?

you can play with values in before and after, actually it's 5px around.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.card {
  position: relative;
  background-color: grey;
  display: block;
  width: 300px;
  min-height: 90px;
  cursor: pointer;
  padding: 15px;
  margin: calc(50vh - 30px) auto 0 auto;
}

.card::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -5px;
  width: calc(100% - 25px);
  height: calc(100% - 10px);
  border-top: 5px solid brown;
  border-left: 5px solid brown;
}

.card::after {
  content: '';
  position: absolute;
  top: -5px;
  right: 10px;
  height: 5px;
  width: 25px;
  background-color: orange;
}

<!-- language: lang-html -->

<div class="card">
</div>

<!-- end snippet -->