.form__newsletter {
margin-top: calc(var(--spacing)*2);
  --size: 24px;
  position: relative;
  display: flex;
  align-items: center;
  position: relative;

  max-width: var(--max-w-content);
  margin-inline: auto;
}
.form__newsletter input[type=email] {
  height: calc(var(--h-block) * 1.5);
  width: 100%;
  border-radius: calc(var(--h-block) * 0.75);
  outline: none;
  border: none;
  padding: 0 2ch;
  font-family: var(--font);
  font-size: var(--fs-normal);
  z-index: 40;
  padding-top: 4px;
  border: 1px solid var(--color-txt);
  background-color: white;

    font-family: var(--font);
    font-size: var(--fs-normal);
    font-weight: 500;
    color: black;

  &::-moz-placeholder,
  &::placeholder {
    font-family: var(--font);
    font-size: var(--fs-normal);
    font-weight: 500;
    color: black!important;
}
  
}

.form__newsletter input[type=email]:focus {
  outline: 3px solid var(--grey-400);
}
.form__newsletter button[type=submit] {
  position: absolute;
  right: 2px;
  z-index: 100;
  --size: calc(var(--h-block)*1.5 - 4px);
  font-family: var(--font);
  font-size: var(--fs-button-bold);
  height: var(--size);
  display: flex;
  align-items: center;
  gap: 0.75ch;
  color: var(--color-accent);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
}
.form__newsletter button[type=submit] .icon, 
.form__newsletter button[type=submit] .txt {
  z-index: 10;
}
.form__newsletter button[type=submit] .icon {
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bg);
  text-align: center;
}
.form__newsletter button[type=submit] .icon svg {
  fill: var(--color-bg);
  width: 80%;
}
.form__newsletter button[type=submit] .txt {
  position: relative;
  top: 2px;
  font-size: var(--fs-normal);
  display: none;
  padding-left: 1ch;
}
.form__newsletter button[type=submit]::after {
  content: "";
  display: block;
  background-color: var(--color-accent);
  border-radius: calc(var(--size) / 2);
  width: var(--size);
  height: var(--size);
  position: absolute;
  right: 0;
  z-index: 0;
  transition: width 0.2s;
}
.form__newsletter button[type=submit]:hover .txt {
  color: var(--color-bg);
  display: block;
}
.form__newsletter button[type=submit]:hover::after {
  width: 100%;
}


[data-template="newsletter"]{

    .details p{
        font-size: var(--fs-xsmall);
        margin-top: calc(var(--spacing)*1);
    }

}