.content__skeleton-item {
  container: content / inline-size;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);

  .content__skeleton-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 1.5rem;
    overflow: hidden;
    background-color: var(--color-gray-500);
  }

  .content__skeleton-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .content__skeleton-info {
      display: flex;
      align-items: center;
      gap: var(--spacing-md);

      .content__skeleton-info-subject {
        aspect-ratio: 1/1;
        border-radius: 100%;
        overflow: hidden;
        background-color: var(--color-gray-500);
      }

      .content__skeleton-info-title {
        background-color: var(--color-gray-500);
      }

      .content__skeleton-info-subtitle {
        margin-top: var(--spacing-sm);
        background-color: var(--color-gray-500);
      }
    }
  }
}

@container content (max-width: 360px) {
  .content__skeleton-bottom {
    height: 3.6rem;

    .content__skeleton-info {
      .content__skeleton-info-subject {
        width: 3.6rem;
      }
    }

    .content__skeleton-info-title {
      width: 16rem;
      height: 1.6rem;
    }

    .content__skeleton-info-subtitle {
      width: 8rem;
      height: 1.2rem;
    }
  }
}

@container content (min-width:361px) and (max-width: 480px) {
  .content__skeleton-bottom {
    height: 4rem;

    .content__skeleton-info {
      .content__skeleton-info-subject {
        width: 4rem;
      }
    }

    .content__skeleton-info-title {
      width: 20rem;
      height: 1.8rem;
    }

    .content__skeleton-info-subtitle {
      width: 8rem;
      height: 1.4rem;
    }
  }
}

@container content (min-width: 481px) {
  .content__skeleton-bottom {
    height: 4.8rem;

    .content__skeleton-info {
      .content__skeleton-info-subject {
        width: 4.4rem;
      }
    }

    .content__skeleton-info-title {
      width: 24rem;
      height: 2rem;
    }

    .content__skeleton-info-subtitle {
      width: 8rem;
      height: 1.6rem;
    }
  }
}

.video__skeleton-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: var(--spacing-md);

  .video__skeleton-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

    .video__skeleton-subject {
      width: 4rem;
      aspect-ratio: 1/1;
      border-radius: 100%;
      overflow: hidden;
      background-color: var(--color-gray-500);
    }

    .video__skeleton-title {
      width: 24rem;
      height: 2rem;
      background-color: var(--color-gray-500);
    }

    .video__skeleton-category {
      width: 8rem;
      height: 1.6rem;
      margin-top: var(--spacing-sm);
      background-color: var(--color-gray-500);
    }
  }

  .video__skeleton-like {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4em;
    aspect-ratio: 1/1;
    border-radius: 100%;
    background-color: var(--color-white);

    .video__skeleton-like-icon {
      width: 3.6rem;
      aspect-ratio: 1/1;
      color: var(--color-gray-400);
    }
  }
}

@media (max-width: 640px) {
  .video__skeleton-bottom {
    padding-inline: var(--spacing-lg);
  }
}

@media (min-width: 640px) and (max-width: 1024px) {
  .video__skeleton-bottom {
    padding-inline: var(--spacing-xl);
  }
}

@media (min-width: 1024px) {
  .video__skeleton-bottom {
    padding-inline: var(--spacing-2xl);

    .video__skeleton-info {
      .video__subject {
        width: 4.4rem;
      }

      .video__skeleton-title {
        height: 2.4rem;
      }

      .video__skeleton-category {
        height: 2rem;
      }
    }

    .video__skeleton-like {
      width: 4.4rem;

      .video__skeleton-like-icon {
        width: 4rem;
      }
    }
  }
}