:root {
  --portraits-gap: 1rem;

  --portrait-aspect-ratio: 0.71;
  --portrait-radius: 2rem;
  --portrait-minwidth: 90vw;
  --portrait-maxwidth: 24rem;
  --portrait-padding: 2rem;
  --portrait-background: var(--color-green-500);
  --portrait-color: var(--color-white);
  --portrait-toggle: var(--color-red-500);
}

  @media (min-width: 475px) {:root {
    --portrait-minwidth: 60vw
}
  }

  @media (min-width: 640px) {:root {
    --portrait-minwidth: 40vw
}
  }

  @media (min-width: 768px) {:root {
    --portrait-minwidth: 30vw
}
  }

  @media (min-width: 1024px) {:root {
    --portrait-radius: 3rem;
    --portrait-minwidth: 0
}
  }

/**
 * Block
 */

.portraits {
}

.portraits .wrapper {
  --wrapper-width: 80rem;
}

.portraits-title {
  text-align: center;
}

.portraits-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  grid-gap: 1rem;
  gap: 1rem;
  grid-gap: var(--portraits-gap);
  gap: var(--portraits-gap);
  padding-bottom: 2rem;
  padding-bottom: var(--portrait-padding);
  padding-right: calc(var(--padding-x)*1);
  margin-right: calc(var(--padding-x)*-1);
}

@media (min-width: 768px) {

.portraits-wrapper {
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 0;
    padding-right: 0;
    margin-right: 0
}
  }

.portraits-wrapper > * {
    flex: 1 1 auto;
  }

/**
 * Single
 */

.portrait {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 0.71;
  aspect-ratio: var(--portrait-aspect-ratio);
  min-width: 90vw;
  min-width: var(--portrait-minwidth);
  max-width: 24rem;
  max-width: var(--portrait-maxwidth);
  position: relative;
  padding: 2rem;
  padding: var(--portrait-padding);
  background: transparent;
  overflow: hidden;
  border-radius: 2rem;
  border-radius: var(--portrait-radius);
  border-bottom-left-radius: 0;
  cursor: pointer;
}

.portrait.active {
    --portrait-color: var(--color-white);
  }

.portrait-message {
  transition: var(--transition-fast);
  opacity: 0;
}

.active .portrait-message {
    opacity: 1;
  }

.portrait-image {
  transition: var(--transition-fast);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.portrait-image::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--color-green-500);
    background: var(--portrait-background);
    transition: var(--transition-fast);
    opacity: 0;
  }

.active .portrait-image::after {
      opacity: 0.8;
    }

.portrait-image img {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
  }

.portrait-toggle {
  --portrait-toggle-size: 1rem;
  position: absolute;
  z-index: 10;
  bottom: 2rem;
  bottom: var(--portrait-padding);
  left: 2rem;
  left: var(--portrait-padding);
  background: var(--color-red-500);
  background: var(--portrait-toggle);
  padding: calc(var(--portrait-toggle-size)/1.5);
  border-radius: calc(var(--portrait-toggle-size)*2);
  color: var(--color-white);
}

.active .portrait-toggle {
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

.portrait-author,
.portrait-text {
  color: var(--color-white);
  color: var(--portrait-color);
}

.active .portrait-name {
    color: var(--color-white);
    color: var(--portrait-color);
  }

.portrait-author {
  margin-top: 2rem;
  margin-top: var(--portrait-padding);
}