.figtree-text {
    font-family: "Figtree", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    line-height: 150%;
    font-style: normal;
  }

.bg {
    width: 100%;
    height: 100vh;
    background-color: #F4D04E;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.card {
    max-width: 340px;
    background-color: white;
    padding: 24px;
    border: 1px solid black;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    filter: drop-shadow(8px 8px 0 #000000);
    margin: 40px;
}

.image-container {
    height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="336" height="201" fill="none" viewBox="0 0 336 201"><g clip-path="url(%23a)"><path fill="%23F4D04E" d="M0 .5h336v200H0z"/><rect width="139" height="95" x="87.996" y="77.729" fill="%23fff" rx="47.5" transform="rotate(-45 87.996 77.729)"/><rect width="139" height="95" x="54.055" y="77.729" fill="%23111" rx="47.5" transform="rotate(-45 54.055 77.729)"/><path fill="%23111" d="M234.864 209.036 451.4-7.5l67.175 67.175-216.536 216.536z"/><rect width="139" height="95" x="20.114" y="77.729" fill="%23fff" rx="47.5" transform="rotate(-45 20.114 77.729)"/><rect width="204.19" height="270.554" fill="%23111" rx="102.095" transform="scale(-1 1) rotate(45 -103.887 14.564)"/><path stroke="%23fff" stroke-width="3" d="m6.69-357.5 135.583 135.727c12.481 12.494 12.481 32.737 0 45.231L-45.544 11.475c-12.481 12.494-12.481 32.737 0 45.23L107.088 209.5"/><path stroke="%23111" stroke-width="3" d="M69.965 71.719v23.334h23.334M136.079 52.273V28.94h-23.334M102.845 38.838v46.67M210.364-37.5l60.873 60.873c12.497 12.496 12.497 32.758 0 45.254l-77.745 77.746c-12.497 12.496-12.497 32.758 0 45.254l69.872 69.873"/><path stroke="%23111" stroke-width="3" d="m253.339 149.574-12.144 12.145 14.256 14.257v12.672h12.673l13.729 13.729 12.145-12.145M278.685 124.228l-12.145 12.145 14.257 14.257v12.673h12.673l13.729 13.729 12.145-12.145M304.031 98.883l-12.145 12.144 14.257 14.257v12.673h12.673l13.729 13.729 12.144-12.145M329.376 73.537l-12.145 12.145 14.257 14.257v12.672h12.673l13.729 13.729 12.145-12.144"/><path stroke="%23fff" stroke-width="5" d="m354.722 48.191-12.145 12.145 14.257 14.257v12.673h12.673l13.729 13.729 12.145-12.145"/><mask id="b" width="285" height="285" x="234" y="-8" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="%23111" d="M234.864 209.036 451.4-7.5l67.175 67.175-216.536 216.536z"/></mask><g stroke="%23fff" mask="url(%23b)"><path stroke-width="3" d="m253.339 149.574-12.144 12.145 14.256 14.257v12.672h12.673l13.729 13.729 12.145-12.145M278.685 124.228l-12.145 12.145 14.257 14.257v12.673h12.673l13.729 13.729 12.145-12.145M304.031 98.883l-12.145 12.144 14.257 14.257v12.673h12.673l13.729 13.729 12.144-12.145M329.376 73.537l-12.145 12.145 14.257 14.257v12.672h12.673l13.729 13.729 12.145-12.145"/><path stroke-width="5" d="m354.722 48.191-12.145 12.145 14.257 14.257v12.673h12.673l13.729 13.729 12.145-12.145"/></g></g><defs><clipPath id="a"><path fill="%23fff" d="M0 .5h336v200H0z"/></clipPath></defs></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.category {
    font-size: clamp(12px, 3vw, 14px);
    padding: 4px 12px 4px 12px;
    border-radius: 4px;
    background-color: #F4D04E;
    font-weight: 600;
    width: fit-content;
    line-height: 1.5%;
}

.date {
    font-size: clamp(12px, 3vw, 14px);
    color: #111111;
}

.description p {
    margin: 0;
    font-size: clamp(14px, 4vw, 16px);
    font-weight: 400;
    color: #6B6B6B;
}

h1 {
    margin: 0.2em 0 0.2em 0; 
    font-size: clamp(20px, 6vw, 24px);
    font-weight: 750;
}

.card:hover .title {
    color: #F4D04E;
}

.autor {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.autor-image {
    width: 30px;
}

.autor-name {
    font-size: clamp(12px, 3vw, 14px);
    font-weight: 700;
}