:host, :root {
  --color-black: #000000;
  --color-main: #7C3555;
  --spacing: 0.25rem;
}

:-moz-focusring {
  outline: inherit;
}

* {
  outline-color: var(--outline-color, transparent);
  outline-width: var(--outline-width, 0px);
  outline-offset: var(--outline-offset, 0px);
  outline-style: var(--outline-style, solid);
}

.caja-contenido {
  container-type: inline-size;
}

.postales--contenedor {
  margin-top: calc(var(--spacing) * 8);
  /*display: grid;
  grid-auto-rows: auto;*/
  row-gap: calc(var(--spacing) * 4);
  column-gap: calc(var(--spacing) * 6);
  /*grid-template-columns: repeat(var(--grid-cols, 1), 1fr);*/
  columns: var(--grid-cols, 1);
  
  @container (min-width: 960px) {
    --grid-cols: 2;
  }
}

interactive-postal:defined {
  position: relative;
  display: block;
  cursor: grab;
  transition: opacity 0.3s linear;

  @media (hover: hover) {
    &:hover {
      opacity: 0.85;
    }
  }
  
  &:focus-visible {
    --outline-color: var(--color-main);
    --outline-style: dashed;
    --outline-width: 4px;
    --outline-offset: 8px;
  }
  
  &:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 10);
  }
}

.postal-reverso:where(interactive-postal:defined *) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s linear;
  z-index: 0;
}

.postal-reverso:where(interactive-postal:defined:state(flipped) *) {
  opacity: 1;
  z-index: 1;
}

.postales--contenedor-aleatorio {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--spacing) * 8);
}