/* =========================================================
   TWO COLUMN MEDIA
   ========================================================= */

.two-col-media {
  --two-col-container: 1200px;
  --two-col-gutter: max(
    24px,
    calc((100vw - var(--two-col-container)) / 2)
  );

  width: 100%;
/*   background: var(--two-col-bg, #ffffff); */
  overflow: hidden;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.two-col-media__container {
  width: min(
    var(--two-col-container),
    calc(100% - 48px)
  );

  margin-inline: auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  align-items: stretch;
}


/* =========================================================
   CONTENT
   ========================================================= */

.two-col-media__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

/*   padding: 80px 0; */

  min-width: 0;
}


/* =========================================================
   VERTICAL ALIGNMENT
   ========================================================= */

.two-col-media--align-top .two-col-media__content {
  justify-content: flex-start;
}

.two-col-media--align-center .two-col-media__content {
  justify-content: center;
}

.two-col-media--align-bottom .two-col-media__content {
  justify-content: flex-end;
}


/* =========================================================
   CONTENT SPACING
   ========================================================= */

.two-col-media__eyebrow {
  margin-bottom: 16px;
}

.two-col-media__heading {
  margin-bottom: 24px;
}

/* .two-col-media__text {
  margin-bottom: 28px;
} */

.two-col-media__cta {
  margin-top: 0;
}

/* Prevent default margins from creating unexpected spacing */

.two-col-media__heading > *:first-child,
.two-col-media__text > *:first-child {
  margin-top: 0;
}

.two-col-media__heading > *:last-child,
.two-col-media__text > *:last-child {
  margin-bottom: 0;
}


/* =========================================================
   IMAGE COLUMN
   ========================================================= */

.two-col-media__media {
  min-width: 0;
  min-height: 100%;

  overflow: hidden;

  display: flex;
  flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  gap: 30px;
}

.two-col-media__image {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-position: center center;
}

.image-side-content{
background-color: #fff;
    padding: 40px 60px;
}


.two-col-media--left .image-side-content{
 border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}


/* =========================================================
   IMAGE FIT
   ========================================================= */

.two-col-media__image--cover {
  object-fit: cover;
}

.two-col-media__image--contain {
  object-fit: contain;
  margin: 0 auto;
}


/* =========================================================
   IMAGE POSITION
   ========================================================= */

/*
   LEFT IMAGE

   Desktop:
   IMAGE | CONTENT
*/

.two-col-media--left .two-col-media__media {
  grid-column: 1;
  grid-row: 1;
}

.two-col-media--left .two-col-media__content {
  grid-column: 2;
  grid-row: 1;

  padding-left: 60px;
}


/*
   RIGHT IMAGE

   Desktop:
   CONTENT | IMAGE
*/

.two-col-media--right .two-col-media__media {
  grid-column: 2;
  grid-row: 1;
}

.two-col-media--right .two-col-media__content {
  grid-column: 1;
  grid-row: 1;

  padding-right: 60px;
}


/* =========================================================
   BLEED TO VIEWPORT
   ========================================================= */

/*
   LEFT BLEED

   The image extends from the container's left edge
   all the way to the browser's left edge.
*/

.two-col-media--left.two-col-media--bleed
  .two-col-media__media {

  margin-left: calc(var(--two-col-gutter) * -1);

  width: calc(100% + var(--two-col-gutter));
}


/*
   RIGHT BLEED

   The image extends from the container's right edge
   all the way to the browser's right edge.
*/

.two-col-media--right.two-col-media--bleed
  .two-col-media__media {

  margin-right: calc(var(--two-col-gutter) * -1);

  width: calc(100% + var(--two-col-gutter));
}


/* =========================================================
   BLEED UNTIL LARGE
   ========================================================= */

/*
   Below the large breakpoint:
   
   LEFT:
   IMAGE | CONTENT

   Image bleeds to viewport.
*/

.two-col-media--left.two-col-media--bleed_large
  .two-col-media__media {

  margin-left: calc(var(--two-col-gutter) * -1);

  width: calc(100% + var(--two-col-gutter));
}


/*
   RIGHT:
   CONTENT | IMAGE

   Image bleeds to viewport.
*/

.two-col-media--right.two-col-media--bleed_large
  .two-col-media__media {

  margin-right: calc(var(--two-col-gutter) * -1);

  width: calc(100% + var(--two-col-gutter));
}


/* =========================================================
   LARGE SCREENS
   ========================================================= */

/*
   At large screens the image becomes contained again.

   Change 1440px if your site's "large" breakpoint
   is different.
*/

@media (min-width: 1700px) {
  .two-col-media--right.two-col-media--bleed
    .two-col-media__media .two-col-media__image{
  width: auto;
    margin:0;
    margin-left: auto;
  }

  .two-col-media--left.two-col-media--bleed_large
    .two-col-media__media {

    margin-left: 0;
    width: 100%;
  }

  .two-col-media--right.two-col-media--bleed_large
    .two-col-media__media {

    margin-right: 0;
    width: 100%;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .image-side-content{
  padding: 30px 20px;
        border-radius: 10px;
  }

  .two-col-media {
    --two-col-gutter: 0px;
  }


  /* -------------------------------------------------------
     Single column
     ------------------------------------------------------- */

  .two-col-media__container {
    width: 100%;

    grid-template-columns: 1fr;

    display: flex;
    flex-direction: column;
    gap: 30px;
  }


  /* -------------------------------------------------------
     Remove desktop bleed behavior
     ------------------------------------------------------- */

  .two-col-media--left.two-col-media--bleed
    .two-col-media__media,

  .two-col-media--right.two-col-media--bleed
    .two-col-media__media,

  .two-col-media--left.two-col-media--bleed_large
    .two-col-media__media,

  .two-col-media--right.two-col-media--bleed_large
    .two-col-media__media {

    margin-left: 0;
    margin-right: 0;

    width: 100%;
  }


  /* -------------------------------------------------------
     Image
     ------------------------------------------------------- */

  .two-col-media__media {
    width: 100%;
    min-height: auto;
  }

  .two-col-media__image {
    width: 100%;
    height: auto;

    max-width: 100%;
  }


  /* -------------------------------------------------------
     Content
     ------------------------------------------------------- 

  .two-col-media__content {
    padding: 48px 0;
  }


  /* -------------------------------------------------------
     Mobile image ABOVE content
     ------------------------------------------------------- */

  .two-col-media--mobile-top .two-col-media__media {
    order: 1;
  }

  .two-col-media--mobile-top .two-col-media__content {
    order: 2;
  }


  /* -------------------------------------------------------
     Mobile image BELOW content
     ------------------------------------------------------- */

  .two-col-media--mobile-bottom .two-col-media__content {
    order: 1;
  }

  .two-col-media--mobile-bottom .two-col-media__media {
    order: 2;
  }


  /* -------------------------------------------------------
     Reset desktop content padding
     ------------------------------------------------------- */

  .two-col-media--left .two-col-media__content,
  .two-col-media--right .two-col-media__content {

    padding-left: 0;
    padding-right: 0;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

/*   .two-col-media__container {
    width: calc(100% - 32px);
  }

  .two-col-media__content {
    padding-top: 40px;
    padding-bottom: 40px;
  } */

}

@media (min-width: 767.98px){
  .two-col-media--right .image-side-content{
 border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
}