@import 'assets/scss/fonts.scss';
@import 'assets/scss/colors.scss';

.wrapper {
  width: 250px;
  max-width: 250px;
  border-radius: 12px;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-template-border-gray);
  @include font-base;
  color: var(--color-text-contrast);
}

.header {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  border-top: none;
  border-bottom: 1px solid var(--color-template-border-gray);
}

.body,
.button,
.contentTemplate {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-bottom: 1px solid var(--color-template-border-gray);
}

.body {
  padding: 0 10px;
}

.button {
  padding: 10px;
}

.contentTemplate {
  max-width: 400px;
  padding: 10px 0px;
}

.buttonURL,
.buttonURL:active,
.buttonURL:visited,
.buttonURL:hover {
  color: var(--color-text-contrast);
  text-decoration: none;
}

.caption {
  @include font-xs;
  margin-top: 5px;
}

.contentTemplate img,
.contentTemplate video {
  max-width: 200px;
  border-radius: 12px;
}

.contentTemplate p {
  text-align: center;
}

.wrapper :last-child {
  border-bottom: none;
}

.body :last-child {
  border-bottom: none;
}
