.global-newsletter-signup__container {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;

  position: fixed;
  z-index: 50;
  right: -244px;
  width: 348px;
  
  transition: all ease-in-out 0.3s;
  will-change: auto;

  bottom: 128px;

  @media screen and (min-width: 430px) {
    width: 400px;
    right: -241px;
  }

  @media screen and (min-width: 768px) {
    width: 520px;
    bottom: 50vh;
    right: -360px;
  }

  &[data-open="true"] {
    right: 0;
  }

  .global-newsletter-signup__trigger {
    color: var(--color-header-links);
    background-color: #fff;

    flex-grow: 1;
    height: 104px;

    width: 160px;
    min-width: 160px;
    max-width: 160px;

    border-left: solid 1px var(--color-header-links);
    border-top: solid 1px var(--color-header-links);  
    border-bottom: solid 1px var(--color-header-links);
    border-right: solid 1px #fff;

    margin: 0 -1px 0 0;

    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;
    padding: 8px;
    
    white-space: nowrap;

    span {
      text-transform: uppercase;
      font-size: 16px;
      line-height: 1.25; 
    }

  }
  .global-newsletter-signup__form-container {

    min-height: 250px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    flex-grow: 1;
    padding: 24px;

    background-color: #fff;
    box-shadow: 300px 0 0 0 #fff;

    border-left: solid 1px var(--color-header-links);
    border-top: solid 1px var(--color-header-links);
    border-bottom: solid 1px var(--color-header-links);
    border-right: solid 1px var(--color-header-links);

    .global-newsletter-signup {
      display: flex;
      flex-direction: column;

      /* & > :not(:last-child) {
        margin-block-start: 16px;
        margin-block-end: 16px;
      }; */

      .field {
        margin: 0 0 16px 0;
        input {
          width: 100%;
          margin: 0;
        }
      }

      button[type="submit"] {

        font-size: 14px;
        font-weight: 500;

        width: 100%;
        height: 48px;

        text-align: center;
        text-transform: uppercase;

        background-color: var(--color-header-links);
        color: #fff;

      }

    }
  }

  .global-newsletter-signup__heading {

    font-size: 24px;
    line-height: 32px;
    font-weight: 700;

    margin: 0 0 0 0;

  }
  .global-newsletter-signup__description {


    font-size: 16px;
    line-height: 24px;

  }
}