/* Community seasonal layer v6 */

#seasonal-layer{
  position:absolute;
  z-index:11;
  left:7%;
  right:7%;
  top:62px;
  height:178px;
  pointer-events:none;
}

.seasonal-cluster{
  position:relative;
  height:100%;
  margin:0 auto;
  max-width:620px;
  pointer-events:none;
}

.seasonal-heading{
  position:absolute;
  z-index:4;
  left:50%;
  top:0;
  transform:translateX(-50%) rotate(var(--season-rot,-1deg));
  display:flex;
  align-items:center;
  gap:7px;
  color:rgba(69,46,28,.72);
  font:18px "Bradley Hand","Segoe Print",cursive;
  white-space:nowrap;
  pointer-events:none;
}

.seasonal-heading svg{
  width:31px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.seasonal-notes{
  position:absolute;
  left:50%;
  top:31px;
  width:560px;
  height:138px;
  transform:translateX(-50%);
  pointer-events:none;
}

.seasonal-note.note{
  width:154px;
  min-height:106px;
  padding:26px 13px 12px;
  pointer-events:auto;
}

.seasonal-note.note .message{
  font-size:15px;
  line-height:1.2;
}

.seasonal-note.note:nth-child(1){left:2%;top:9px}
.seasonal-note.note:nth-child(2){left:35%;top:0}
.seasonal-note.note:nth-child(3){left:68%;top:10px}

/* Keep the main ten out of the seasonal strip. */
#recent-layer .note{z-index:10}

@media(max-width:850px){
  #seasonal-layer{left:3%;right:3%;top:58px;height:166px}
  .seasonal-notes{width:94%;max-width:560px}
  .seasonal-note.note{width:31%;min-height:103px;padding:25px 10px 10px}
  .seasonal-note.note .message{font-size:13px}
  .seasonal-note.note:nth-child(1){left:0}
  .seasonal-note.note:nth-child(2){left:34.5%}
  .seasonal-note.note:nth-child(3){left:69%}
}

@media(max-width:560px){
  #seasonal-layer{top:54px;height:154px}
  .seasonal-heading{font-size:15px}
  .seasonal-heading svg{width:25px;height:21px}
  .seasonal-notes{top:28px}
  .seasonal-note.note{min-height:94px;padding:23px 8px 8px}
  .seasonal-note.note .message{font-size:11.5px;line-height:1.17}
}