.portfolio {
  /*! width: 75vw; */
  min-width:480px;
  margin:auto;
  columns: 3;
  gap:22px;
}

.portfolio .date {
  display:flex;
  align-items:center;
  justify-content: space-between;
  box-sizing:border-box;
  width:100%;
  height:fit-content;
  background:#eeceb1;
  line-height:1.1;
  text-align:center;
  letter-spacing:4px;
  text-transform: uppercase;
  padding:12px;
  font-size:11.5px;
  color:#5c312e;
  margin-bottom: 12px;
  border-bottom:1px solid #c89278;
  font-family: var(--gabriela);
}

.portfolio .date:before {
  content:"✁----";
  font-size:14px;
  float:left;
}
.portfolio .date:after {
  content:"✁----";
  font-size:14px;
  float:right;
  transform:scaleX(-100%)
}

.portfolio .itemhead {
  background:#6f3c37;
  display:block;
  width:100%;
  text-align:center;
  line-height:1.1;
  font-size:24px;
  text-transform:uppercase;
  color:#eeceb1;
  font-family:garamond, serif;
  font-weight: bold;
  padding:14px 16px 16px 16px;
  margin-bottom:8px;
  -webkit-text-stroke: 4px #40170e;
  paint-order: stroke;
  text-shadow: 0 3px #40170e;
  border-bottom: 2px dashed #40170e;
  box-sizing: border-box;
  box-shadow: 0 -6px #602c28 inset, 0 -8px #a06c52 inset;
  background-image: repeating-linear-gradient(45deg, #6f3c37, transparent 7px, #602c28 7px, #602c28 9px);
}

.portfolio .item {
  background-color:#dbb396;
  background-image:linear-gradient(45deg, #D1A28B 25%, transparent 25%, transparent 75%, #D1A28B 75%, #D1A28B), linear-gradient(-45deg, #D1A28B 25%, transparent 25%, transparent 75%, #D1A28B 75%, #D1A28B);
  background-size:35px 35px;
  background-position: top center;
  border:1px solid #75282b;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  break-inside: avoid;
  min-width: 265px;
  overflow:hidden;
  /* padding: 14px;*/
  margin:0 0 28px;
  box-shadow:0 0 0 3px #9b675b, 0 15px 5px #1c0e0e;
}

.portfolio .item:nth-of-type(2n) {
    background-color:#e1bea4;
    background-image:linear-gradient(45deg, #e8ccb9 25%, transparent 25%, transparent 75%, #e8ccb9 75%, #e8ccb9 ), linear-gradient(-45deg, #e8ccb9 25%, transparent 25%, transparent 75%, #e8ccb9 75%, #e8ccb9 );
}

.portfolio .tagcontainer {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  width:95%;
  gap:6px 10px;
  margin:14px 0;
  padding:8px;
  background:#eeceb1;
  border-radius:10px;
  border: 1px solid #d1a28b;
  box-sizing: border-box;
  max-height:43px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#9b675b transparent;
}

.portfolio .item:nth-of-type(2n) .tagcontainer, .portfolio .item:nth-of-type(2n) .date {
  background: #f7dfc9;
  border-color: #e1bea4;
}

.portfolio .tag {
  font-size:10.5px;
  text-transform:uppercase;
  max-width: 130px;
  text-align:center;
  background:#5c312e;
  color:#fdf7f0;
  border-radius:5px;
  padding:5px 8px;
  font-family: var(--gabriela);
  letter-spacing: .5px;
}

.portfolio .item img {
  width: calc(100% - 28px);
  border-radius:10px;
  border:1px dashed #5c312e;
}

.portfolio .item img:hover {
  border:1px solid #5c312e;
  outline: 1px solid #5c312e;
}

.portfolio .item img + img {
  margin-top:14px;
}
@media (max-width:1200px) {
  .portfolio {
    columns:2;
  }
}

@media (max-width:650px) {
  .portfolio {
    columns:1;
    min-width: unset !important;
  }
  .portfolio .item {
    min-width: unset !important;
  }
}