.banner__wrapper {
  max-width: 1170px;
  margin: 0 auto;
}

.breakpoint-desktop .banner__wrapper,
.breakpoint-widescreen .banner__wrapper  {
  width: 74%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.breakpoint-tablet-landscape .banner__wrapper{
  width: 85%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}


.breakpoint-desktop .banner__content,
.breakpoint-widescreen .banner__content  {
  padding:  0 0.75%;
  position: relative;
}

.banner {
  height: 482px;
  position: relative;
  overflow: hidden;
  background: #fff;
}

.banner__image {
  position: absolute;
  right: 10.75%;
  height: 100%;
  max-height: 483px;
  top: 0;
}

.banner__image img {
  max-height: 483px;
  height: 100%;
  width: auto;
  position: relative;
  right: -58rem;
  display: block;
  max-width: 150%;
}

.breakpoint-desktop .banner__image img,
.breakpoint-tablet-landscape .banner__image img {
  right: -35rem;
}

.breakpoint-tablet-landscape .banner__image:after {
  left: 22rem;
}

.banner__image span {
  display: none;
  height: 100%;
  top: 0px;
  right: -24rem;
  position: absolute;
  width: 100px;
  //  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}

.breakpoint-widescreen .banner__image span  {
  display: block;
}

.banner__image:after {
  content: '';
  width: 50%;
  height: 130%;
  position: absolute;
  left: 16rem;
  bottom: -71px;
  z-index: 1;
  background: #fff;
  border-radius: 60%;
}

.breakpoint-mobile-only .banner__image:after,
.breakpoint-tablet-portrait .banner__image:after {
  display: none;
}

.banner__text {
  max-width: 50%;
  z-index: 4;
  position: relative;
  height: 482px;
  background: #fff;
}

.banner__text h1 {
  font-size: 64px;
  line-height: 1;
  margin: 0 0 20px;
  padding-top: 80px;
  font-weight: 600;
}

.banner__content p {
  line-height: 25px;
  font-size: var(--text-large);
  color: var(--color-text-light);
}

.banner__links {
  margin-top: 3rem;
}

.banner__links .field--item {
  display: inline-block;
  vertical-align: text-bottom;
}

.banner__links .field--item a {
  text-align: center;
  display: inline-block;
  font-size: 15px;
  border-radius: 8px;
  width: 200px;
  height: 46px;
  line-height: 44px;
  margin-bottom: 2rem;
  border: 2px solid;
  text-decoration: none;
  font-family: var(--header-font);
  transition: all 200ms ease-in;
  font-variant-ligatures: contextual;
  font-feature-settings: "calt";
}

.banner__links .field--item:nth-child(2n+1){
  margin-right: 2rem;
}

.banner__links .field--item:nth-child(2n+1) a{
  color: #fff;
  background: var(--color-secondary);
}

.banner__links .field--item:nth-child(2n+1) a:hover {
  background: var(--color-secondary-light);
}

.banner__links .field--item:nth-child(2n+2) a{
  color: var(--color-primary);
  background: #fff;
}

.banner__links .field--item:nth-child(2n+2) a:hover{
  color: #fff;
  background: var(--color-primary-bright);
}

.breakpoint-tablet-portrait .banner,
.breakpoint-mobile-only .banner {
  height: auto;
}

.breakpoint-tablet-portrait .banner__image,
.breakpoint-mobile-only .banner__image {
  height: auto;
  position: relative;
  max-height: initial;
  right: auto;
}

.breakpoint-tablet-portrait .banner__image img,
.breakpoint-mobile-only .banner__image img {
  height: auto;
  max-height: initial;
  width: 100%;
  position: relative;
  right: auto;
}

.breakpoint-tablet-portrait .banner:after,
.breakpoint-mobile-only .banner:after {
  display: none;
}

.breakpoint-tablet-portrait .banner__text,
.breakpoint-mobile-only .banner__text {
  max-width: 100%;
  padding-right: 6rem;
  height: auto;
  text-align: center;
  padding-bottom: 3rem;
}
  .breakpoint-tablet-portrait .banner__text {
    padding-right: 0;
  }
.breakpoint-tablet-portrait .banner__text h1 ,
.breakpoint-mobile-only .banner__text h1 {
  padding-top: 3rem;
}

.breakpoint-mobile-only .banner__text {
  padding-right: 1rem;
  padding-left: 1rem;
  padding-bottom: 2rem;
}

.breakpoint-mobile-only .banner__text h1 {
  font-size: 46px;
}

.breakpoint-mobile-only .banner__links .field--item a {
  width: 140px;
  font-size: 14px;
  border: 1px solid;
}

.breakpoint-mobile-only .banner__links .field--item:nth-child(2n+1){
  margin-right: 1rem;
}