.sale-header {
   padding-inline: max(var(--space-4), var(--gutter, 0px));
}

.sale-header-inner {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-3);
   width: 100%;
   max-width: var(--container-width, 1200px);
   margin-inline: auto;
   padding-block: var(--space-4);
}

.sale-header-body {
   display: contents;
}

.sale-cover {
   flex: none;
   width: 4rem;
   aspect-ratio: var(--sale-card-ratio, 1);
   overflow: hidden;
}

.sale-cover-img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.sale-cover-img--logo {
   object-fit: contain;
}

.sale-title {
   flex: 1 1 0;
   min-width: 0;
   margin: 0;
   font-size: 1.25rem;
   line-height: 1.1;
   overflow-wrap: anywhere;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.sale-facts {
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
   font-size: .875rem;
   line-height: 1.45;
}

.sale-facts > p {
   margin: 0;
}

.sale-facts-place {
   color: color-mix(in srgb, currentColor 70%, transparent);
}

.sale-platforms {
   order: 1;
   display: flex;
   flex-wrap: wrap;
   flex-basis: 100%;
   gap: var(--space-2);
   margin: 0;
   padding: 0;
   list-style: none;
}

.sale-platforms > li {
   display: flex;
   flex: 1 1 8rem;
}

.sale-platform {
   flex: 1;
   white-space: nowrap;
}

.sale-resources {
   order: 2;
   display: flex;
   flex-wrap: wrap;
   flex-basis: 100%;
   gap: var(--space-1) var(--space-5);
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: .875rem;
}

.sale-resource {
   text-decoration: underline;
}

@media (min-width: 768px) {
   .sale-header-inner {
      flex-wrap: nowrap;
      align-items: stretch;
      gap: var(--space-6);
      padding-block: var(--space-6);
   }

   .sale-header-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--space-4);
      min-width: 0;
   }

   .sale-cover {
      width: 10.5rem;
   }

   .sale-title {
      flex: none;
      font-size: 1.75rem;
   }

   .sale-facts {
      flex-basis: auto;
      gap: var(--space-2);
      font-size: .9375rem;
      line-height: inherit;
   }

   .sale-platforms {
      flex: 0 1 auto;
      align-self: flex-start;
      justify-content: flex-end;
   }

   .sale-platforms > li {
      flex: none;
   }

   .sale-resources {
      flex-basis: auto;
   }
}