.single_post,
.single_project {
  --color-text: var(--color-white);
  text-decoration: none;
  position: relative;
  isolation: isolate;
  border-radius: var(--border-radius-m);
  box-shadow: var(--box-shadow-light);
  overflow: hidden;

  .post_thumb {
    aspect-ratio: 7 / 9;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
  }

  .post_data {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    padding: var(--gap-s);
    background: linear-gradient(
      180deg,
      hsl(from var(--color-black) h s l / 0) 42%,
      var(--color-black) 100%
    );
    border-radius: var(--border-radius-m);
    overflow: hidden;
    transition: background 0.4s ease;

    .post_tag {
      display: inline-block;
      padding: calc(var(--gap-xxs) / 2) calc(var(--gap-s) / 2);
      border-radius: var(--border-radius-s);
      background-color: var(--color-green);
      color: var(--color-black);
      font-weight: 900;
      margin-bottom: var(--gap-xxs);
    }

    .large-text {
      font-weight: 400;
    }
  }

  &:hover {
    color: var(--color-white);

    .post_data {
      background: linear-gradient(
        180deg,
        hsl(from var(--color-black) h s l / 0) -7.81%,
        var(--color-black) 82.43%
      );
    }
  }
}

.single_project {
  .post_data {
    .post_tag {
      background-color: transparent;
      padding: 0;
      color: var(--color-white);
    }
  }
}