/*******************************/
/* Construct bouquet of images */
/*******************************/

.bouquet {
  position: relative;
  text-align: center; }



/*******************************/
/* Construct bouquet of images */
/*******************************/

.bouquet>h1 {
  color: rgba(var(--color-pink-dark), 1);
  cursor: pointer;
  display: inline-block;
  font-family: 'SignPaint';
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 3rem;
  position: relative;
  text-align: center;
  text-shadow: .1rem .1rem rgba(var(--foreground), 1);
  transition: all 300ms ease-in-out;
  z-index: 2; }


html.night .bouquet>h1 {
  color: rgba(var(--color-pink-lite), 1);
  text-shadow: .1rem .1rem rgba(var(--background), 1); }


@media (max-width: 800.00px) {

  .bouquet>h1 {
    font-size: 4rem;
    line-height: 4rem;
    text-align: center; } }



/*******************************/
/* Construct bouquet of images */
/*******************************/

.bouquet>.about {
  display: inline-block; }


.bouquet>.about>li {
  color: rgba(var(--color-blue-dark), 1);
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.7rem;
  position: relative;
  text-align: left;
  text-shadow: .1rem .1rem rgba(var(--color-blue-dark), .25); }

.bouquet>.about>li:before {
  background-image: url('../images/wanted.png');
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: inline-block;
  height: 1em;
  left: -1.1em;
  position: absolute;
  top: -.1em;
  width: 1em;
  vertical-align: middle; }


html.night .bouquet>.about>li {
  color: rgba(var(--color-blue-lite), 1); }


@media (max-width: 800.00px) {

  .bouquet>.about>li {
    font-size: 2.2rem;
    line-height: 2.2rem; } }



/*******************************/
/* Construct bouquet of images */
/*******************************/

.bouquet>.images {
  cursor: pointer;
  position: relative; }


.bouquet>.images>li {
  bottom: 0;
  left: 50%;
  position: absolute;
  text-align: center;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
  transition: all 300ms ease-in-out; }



/*******************************/
/* Construct bouquet of images */
/*******************************/

.bouquet>.images>li>img {
  mask-image:
    linear-gradient(
      to bottom,
      black 0%,
      transparent 80%);
  transition: all 300ms ease-in-out;
  width: 8rem;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      black 0%,
      transparent 80%); }


.bouquet:hover>.images>li>img {
  width: 9rem; }

.bouquet>.images:hover>li>img {
  width: 10rem; }


@media (max-width: 800.00px) {

  .bouquet>.images>li>img {
    width: 12rem; }

  .bouquet:hover>.images>li>img {
    width: 14rem; }

  .bouquet>.images:hover>li>img {
    width: 13rem; } }