.single_post {
  --color-link: var(--color-dark-teal);
  flex-basis: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--gap-m);
  background-color: var(--color-light-grey);
  padding: var(--gap-xs);
  border-radius: var(--gap-xs);
  transition: background-color 0.4s ease;

  .post_data {
    flex-basis: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    gap: var(--gap-xs);

    .wp_content {
      > *:not(.button) {
        margin-bottom: calc(var(--gap-s) / 2);
      }

      > :last-child {
        margin-bottom: 0;
      }

      .tag {
        display: inline-flex;
        font-size: 14px;
        border: 1px solid currentColor;
        border-radius: var(--border-radius-max);
        padding: calc(var(--gap-s) / 4) calc(var(--gap-s) / 2);
      }

      .post_data_details {
        font-weight: 400;
        color: var(--color-grey);
        transition: color 0.4s ease;
      }
    }

    .arrow_container {
      margin-left: auto;
      width: 36px;
      aspect-ratio: 1;
      background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 999 999'%3E%3Cpath fill='%23eee' d='M749 932A499 499 0 1 1 250 67a499 499 0 0 1 499 865'/%3E%3Cpath fill='%232b4151' d='m298 595 327-188-177-48a28 28 0 0 1 15-53l241 64c15 4 24 20 20 34l-65 242a28 28 0 0 1-54-15l48-176-327 188a28 28 0 0 1-28-48'/%3E%3C/svg%3E");
      transition: all 0.4s ease;
    }
  }

  .post_thumb {
    aspect-ratio: 4 / 3;
    border-radius: var(--gap-xs);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  &:is(:hover, :focus) {
    --color-link-hover: var(--color-white);
    background-color: var(--color-dark-teal);

    .post_data {
      .wp_content {
        .post_data_details {
          color: var(--color-white);
          transition: color 0.4s ease;
        }
      }

      .arrow_container {
        background: center / contain no-repeat
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 999 999'%3E%3Cpath fill='%2382bf39' d='M749 932A499 499 0 1 1 250 67a499 499 0 0 1 499 865'/%3E%3Cpath fill='%232b4151' d='m298 595 327-188-177-48a28 28 0 0 1 15-53l241 64c15 4 24 20 20 34l-65 242a28 28 0 0 1-54-15l48-176-327 188a28 28 0 0 1-28-48'/%3E%3C/svg%3E");
      }
    }
  }

  /* responsive */
  @media (width >= 576px) {
    &:nth-child(odd) {
      flex-direction: column;

      .post_data {
        flex-flow: column-reverse nowrap;
      }
    }
  }

  @media (width >= 1200px) {
    .post_data {
      flex-flow: row nowrap;
      align-items: flex-end;
    }

    &:nth-child(odd) {
      .post_data {
        flex-flow: row nowrap;
        align-items: flex-start;
      }
    }
  }
}

/* background */
.bg_light_grey {
  .single_post {
    background-color: var(--color-white);

    .post_data {
      .arrow_container {
        background: center / contain no-repeat
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 999 999'%3E%3Cpath fill='%23fff' d='M749 932A499 499 0 1 1 250 67a499 499 0 0 1 499 865'/%3E%3Cpath fill='%232b4151' d='m298 595 327-188-177-48a28 28 0 0 1 15-53l241 64c15 4 24 20 20 34l-65 242a28 28 0 0 1-54-15l48-176-327 188a28 28 0 0 1-28-48'/%3E%3C/svg%3E");
      }
    }

    &:is(:hover, :focus) {
      --color-link-hover: var(--color-white);
      background-color: var(--color-dark-teal);

      .post_data {
        .arrow_container {
          background: center / contain no-repeat
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 999 999'%3E%3Cpath fill='%2382bf39' d='M749 932A499 499 0 1 1 250 67a499 499 0 0 1 499 865'/%3E%3Cpath fill='%232b4151' d='m298 595 327-188-177-48a28 28 0 0 1 15-53l241 64c15 4 24 20 20 34l-65 242a28 28 0 0 1-54-15l48-176-327 188a28 28 0 0 1-28-48'/%3E%3C/svg%3E");
        }
      }
    }
  }
}