.showroom-grid {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.showroom-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 1em;
  overflow: hidden;
  transition: all var(--transition-duration);
  
  &:hover {
    border-color: var(--clr-accent);
    box-shadow: 0 0 24px var(--clr-accent-glow);
  }
}

.showroom-card_preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: clip;
  
  iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  .preview-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-muted);
  }
}

.showroom-card_open {
  position: absolute;
  top: 0; right: 0;
  width: 2.5em; height: 2.5em;
  background-color: var(--clr-surface-alt);
  border-radius: 0 0 0 1em;
  color: var(--clr-text);
  /* opacity: 0.75; */

  &::after {
    content: '⤢';
    position: absolute;
    left: 53%; top: 51%;
    translate: -50% -50%;
    /* background-color: #fff; */
    font-size: 1.2em;
    transition: all var(--transition-duration);
  }

  &:hover {
    opacity: 1;
    background-color: var(--clr-accent);
  }
}

.showroom-card_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  border-top: 1px solid var(--clr-border);

  &:has(.showroom-card_info-toggle:checked) {
    & ~ .showroom-card_info {
      display: flex;
    }
    & ~ .showroom-card_description {
      display: block;
    }
  }
}

.showroom-card_title {
  font-size: 1.5em;
}

.showroom-card_author {
  font-size: 0.9em;
  color: var(--clr-text-muted);
}

.showroom-card_info-toggle {
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  font: inherit;
  width: 3em;
  height: 3em;
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  border-radius: 0.5em 0 0.5em 0.5em;
  transition: all var(--transition-duration);
  
  &::after {
    content: '+';
    position: absolute;
    left: 50%; top: 50%;
    translate: -50% -50%;
    font-size: 2.5em;
    transition: all var(--transition-duration);
  }
  
  &:hover {
    background-color: var(--clr-accent);
  }
  
  &:checked::after {
    rotate: 45deg;
  }
}

.showroom-card_description,
.showroom-card_info {
  display: none;
  padding: 0 1em 1em;
  transition: all var(--transition-duration);

  @starting-style {
    opacity: 0;
    translate: 0 1em;
  }
}

.showroom-card_info {
  display: none;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
  border-top: 1px solid var(--clr-border);

  .showroom-card_usage {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }

  .link {
    align-self: flex-end;
  }
}

.showroom-card_markup {

  /* Revert all styles in the markdown except for pre and code, which we want to keep for the code snippets */
  *:not(pre, pre *) {
    all: revert;
  }
}

.contribute-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  text-align: center;
}