<div class="project-card">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quas! Amet dolorum ratione doloremque molestias debitis qui, nam hic cupiditate aperiam voluptate! Earum vero labore cumque cum officia eum alias?
</div>
.project-card {
  position: relative;
  display: flex;
  height: 230px;
  width: 430px;
  flex-direction: column;
  padding: 20px; /* Внутренние отступы по вашему усмотрению */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' width='431' height='231' viewBox='0 0 431 231' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_336_5768' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M431 24C431 10.7452 420.255 0 407 0H24C10.7452 0 0 10.7452 0 24V207C0 220.255 10.7452 231 24 231H349C362.255 231 373 220.255 373 207V197C373 183.745 383.745 173 397 173H407C420.255 173 431 162.255 431 149V24Z'/%3E%3C/mask%3E%3Cpath d='M24 1H407V-1H24V1ZM1 207V24H-1V207H1ZM349 230H24V232H349V230ZM374 207V197H372V207H374ZM397 174H407V172H397V174ZM430 24V149H432V24H430ZM407 174C420.807 174 432 162.807 432 149H430C430 161.703 419.703 172 407 172V174ZM374 197C374 184.297 384.297 174 397 174V172C383.193 172 372 183.193 372 197H374ZM349 232C362.807 232 374 220.807 374 207H372C372 219.703 361.703 230 349 230V232ZM-1 207C-1 220.807 10.1929 232 24 232V230C11.2974 230 1 219.703 1 207H-1ZM407 1C419.703 1 430 11.2975 430 24H432C432 10.1929 420.807 -1 407 -1V1ZM24 -1C10.1929 -1 -1 10.1929 -1 24H1C1 11.2974 11.2975 1 24 1V-1Z' fill='%234A4A4A' mask='url(%23path-1-inside-1_336_5768)'/%3E%3C/svg%3E%0A");
}

@media (max-width: 768px) {
  .project-card {
    width: 300px;
    height: 200px;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.