.post-home-widget {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  .post-container {
    display: flex;
    flex-direction: column;
    border-radius: 7px;
    overflow: hidden;
    height: max-content;
    user-select: none;

    &.one-column {
      aspect-ratio: 1 / 1;
      width: calc(50% - 4px);
    }

    &.one-column-big {
      width: 100%;
      aspect-ratio: 1 / 1;
    }

    &.two-columns {
      aspect-ratio: 2 / 1;
      width: 100%;
    }

    .post-image {
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
      height: 100%;
    }

    .post-info {
      display: flex;
      flex-direction: column;
      padding: 4px 8px 4px 8px;
      color: var(--e-global-color-primary);
      z-index: 1;

      .info-title, .info-sub-title {
        -webkit-line-clamp: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
      }

      .info-title {
        color: var(--e-global-color-primary);
      }

      .info-sub-title {
        color: var(--e-global-color-primary);
      }
    }
  }

  @media only screen and (min-width: 768px) {
    .post-container {
      &.one-column {
        width: calc(50% - 4px);
      }

      &.one-column-big {
        width: calc(100%);
      }

      &.two-columns {
        width: calc(100%);
      }
    }
  }

  @media only screen and (min-width: 1024px) {
    .post-container {
      &.one-column {
        width: calc(33% - 4px);
      }

      &.one-column-big {
        width: calc(33% - 4px);
      }

      &.two-columns {
        width: calc(66% - 4px);
      }

      .post-info {
        .info-title {
          font-size: 1.1rem;
        }

        .info-sub-title {
          font-size: 1rem;
        }
      }
    }
  }
}