[data-component-id="kackaamin:news_card"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 80px;
  height: 100%;
  cursor: pointer;


  &:hover {
    background-color: var(--bg-tertiary);
    & .card-footer {
      & a {
        color: var(--color-cedar);
      }
    }    
  }

  & .card-header {
    position: relative;

    & img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 0 0 0 80px;
    }

    & span {
      position: absolute;
      top: 32px;
      right: 32px;

      background-color: var(--text-primary);
      color: var(--text-alternative);
      font-size: 14px;
      padding: 4px 6px;
      border-radius: 8px 0;
      font-weight: 600;
      box-shadow:
        0 6px 10px 4px rgba(0 0 0 / 0.15),
        0 2px 3px rgba(0 0 0 / 0.3);
    }
  }

  & .card-body {
    flex-grow: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
  }

  & .card-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: auto;
  }

  & .card-footer {
    display: flex;
    align-items: center;
    justify-content: end;

    & a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--action-secondary);
      font-weight: 500;
    }
  }

  & dialog:open {
    width: 100%;
    min-height: 100dvh;
    background: transparent;
    display: flex;
    flex-direction: column;
    cursor: auto;

    &::backdrop {
      background-color: color-mix(in srgb, var(--bg-tertiary) 85%, transparent);
      backdrop-filter: blur(15px);
    }

    & .modal-box {
      container-type: inline-size;
      background: var(--bg-primary);
      color: var(--text-primary);
      width: 100%;
      flex-grow: 1;
      border-radius: 20px;
      max-width: 1024px;
      margin: auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    & .modal-content {
      flex-grow: 1;
    }

    & .modal-loading {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100px;

      & svg {
        width: 32px;
        height: 32px;
        animation: spin 1s linear infinite;
      }
    }

    & .htmx-request.modal-loading,
    & .htmx-request .modal-loading {
      display: flex;
    }

    & .close-button {
      align-self: end;
      cursor: pointer;
    }

    @media (min-width: 1024px) {
      padding: 64px 0;

      & .modal-content {
        padding: 0 40px;
      }
    }
  }
}

.views-view-responsive-grid__item:nth-child(even) [data-component-id="kackaamin:news_card"] {
  border-radius: 80px 0;

  & .card-header img {
    border-radius: 0 0 80px 0;
  }

  & .card-footer {
    justify-content: start;
  }
}