/* base layout */

.__summer-special {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background-image: url('/login/files/images/beach.svg');
  background-position: center;
  background-size: cover;
  padding: 0px 20px;
  -webkit-box-shadow: inset 3px 3px 10px -8px var(--black);
  box-shadow: inset 3px 3px 10px -8px var(--black);
  height: 100%;
  overflow: auto;
}

.__summer-special .__title-wrapper {
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));
  width: 100%;
}

.__summer-special .__title-wrapper .__title {
  background-color: var(--white);
  margin: var(--row-gap-3) 0px;
  clip-path: polygon(0% 0%, 100% 0%, 96% 50%, 100% 100%, 0% 100%, 4% 50%);
  width: 100%;
  padding: 15px 30px;
  text-align: center;
  color: rgb(255, 136, 0);
  text-shadow: 2px 2px 0px rgba(255, 185, 55, 0.5);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.6em;
  letter-spacing: 0.08em;
}

.__summer-special .__description-wrapper {
  max-width: 400px;
  margin-bottom: var(--row-gap-3);
}

/* description panel */

.__summer-special .__description-wrapper .__description {
  background-color: var(--white);
  padding: 30px 40px;
  box-sizing: content-box;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));
  opacity: 0.9;
}

.__summer-special .__description-wrapper .__title {
  text-align: center;
  color: rgb(255, 136, 0);
  text-shadow: 2px 2px 0px rgb(255 185 55 / 50%);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 2.5em;
  letter-spacing: 0.04em;
  margin-bottom: 35px;
  line-height: 1.2;
  word-break: break-word;
}

.__summer-special .__description-wrapper p {
  margin-bottom: 20px;
  font-size: 1em;
  color: var(--charcoal-grey);
  line-height: 1.7;
  word-break: break-word;
}

.__summer-special .__description-wrapper p.info {
  margin: 10px 0px;
  font-size: 0.8em;
  color: var(--regent-grey);
}

.__summer-special .__description-wrapper .--btn-cta {
  width: 100%;
  font-size: 1.5em;
  font-weight: bold;
  color: var(--white);
  text-decoration: none;
  background-color: rgb(255, 136, 0);
  box-shadow: 0px 5px rgb(209, 112, 0);
  margin-bottom: 20px;
}

.__summer-special .__description-wrapper .--btn-cta:hover {
  background-color: rgb(255, 153, 0);
}

/* responsive break points  */

@media only screen and (max-width: 767px) {
  .__summer-special .__description-wrapper .--btn-cta {
    font-size: 1em;
  }

  .__summer-special .__title-wrapper,
  .__summer-special .__description-wrapper,
  .__summer-special .__info-wrapper {
    width: 90%;
  }
}