/*!******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/oscontentblock/style.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
.osgraycta {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1a1815+0,464441+100 */
  background: linear-gradient(to right, #1a1815 0%, #464441 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  padding: 0;
  position: relative;
  overflow: visible;
}

.osgraycta.white {
  background-color: var(--white);
}

.osgraycta .text .label {
  color: var(--purple-200);
}

.osgraycta .content-img {
  max-height: none;
  height: auto;
}

.osgraycta .post-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
}

.osgraycta.dark {
  background-color: var(--gray-950);
}

.osgraycta .text strong {
  font-weight: 600;
}

.osgraycta.has-lines {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4MSIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxMjgxIDkwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjAuNSIgeTE9Ii0yLjE4NTU3ZS0wOCIgeDI9IjAuNTAwMDM5IiB5Mj0iOTAwIiBzdHJva2U9IiNGNUYzRjAiLz4KPGxpbmUgeDE9IjMyMC41IiB5MT0iLTIuMTg1NTdlLTA4IiB4Mj0iMzIwLjUiIHkyPSI5MDAiIHN0cm9rZT0iI0Y1RjNGMCIvPgo8bGluZSB4MT0iNjQwLjUiIHkxPSItMi4xODU1N2UtMDgiIHgyPSI2NDAuNSIgeTI9IjkwMCIgc3Ryb2tlPSIjRjVGM0YwIi8+CjxsaW5lIHgxPSI5NjAuNSIgeTE9Ii0yLjE4NTU3ZS0wOCIgeDI9Ijk2MC41IiB5Mj0iOTAwIiBzdHJva2U9IiNGNUYzRjAiLz4KPGxpbmUgeDE9IjEyODAuNSIgeTE9Ii0yLjE4NTU3ZS0wOCIgeDI9IjEyODAuNSIgeTI9IjkwMCIgc3Ryb2tlPSIjRjVGM0YwIi8+Cjwvc3ZnPgo=);
  background-size: 100%;
  background-position: center;
}

.osgraycta.dark.has-lines {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI4MSIgaGVpZ2h0PSI4NjgiIHZpZXdCb3g9IjAgMCAxMjgxIDg2OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGxpbmUgeDE9IjAuNSIgeTE9Ii0yLjE4NTU3ZS0wOCIgeDI9IjAuNTAwMDM4IiB5Mj0iODY4IiBzdHJva2U9IiMzMDJFMkIiLz4KPGxpbmUgeDE9IjMyMC41IiB5MT0iLTIuMTg1NTdlLTA4IiB4Mj0iMzIwLjUiIHkyPSI4NjgiIHN0cm9rZT0iIzMwMkUyQiIvPgo8bGluZSB4MT0iNjQwLjUiIHkxPSItMi4xODU1N2UtMDgiIHgyPSI2NDAuNSIgeTI9Ijg2OCIgc3Ryb2tlPSIjMzAyRTJCIi8+CjxsaW5lIHgxPSI5NjAuNSIgeTE9Ii0yLjE4NTU3ZS0wOCIgeDI9Ijk2MC41IiB5Mj0iODY4IiBzdHJva2U9IiMzMDJFMkIiLz4KPGxpbmUgeDE9IjEyODAuNSIgeTE9Ii0yLjE4NTU3ZS0wOCIgeDI9IjEyODAuNSIgeTI9Ijg2OCIgc3Ryb2tlPSIjMzAyRTJCIi8+Cjwvc3ZnPgo=);
  background-size: 100%;
  background-position: center;
}

.osgraycta.has-bottom-circle {
  padding: 8rem 0 16rem;
}

.osgraycta.has-top-circle {
  padding: 16rem 0 8rem;
}

.osgraycta.has-top-circle.has-bottom-circle {
  padding: 16rem 0;
}

.osgraycta .post-block .circle-horizontal {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  z-index: 998;
  mix-blend-mode: difference;
}

.osgraycta .post-block .circle-horizontal.bottom {
  top: auto;
  bottom: 0;
  transform: translate(-50%, 50%);
}

.osgraycta .post-block .circle-horizontal svg {
  max-width: 26.25rem;
}

.osgraycta .title {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3rem;
}

.osgraycta .intro {
  color: var(--white);
}

.osgraycta .text p {
  color: var(--white);
  margin-bottom: 2rem;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 400;
}

.osgraycta .text .buttons {
  display: flex;
  gap: 1.5rem;
}

.osgraycta .content-icon-wrapper {
  margin-right: 0.5rem;
  vertical-align: middle;
}

.osgraycta.dark .content-icon-wrapper svg path {
  stroke: var(--purple-200);
}

@media screen and (max-width: 1440px) {
  .osgraycta .intro {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 1024px) {
  .osgraycta {
    padding: 4rem 0;
  }
  .osgraycta .intro {
    font-size: 1.5rem;
    margin: 0 4rem 6.25rem;
  }
}
@media screen and (max-width: 768px) {
  .osgraycta .post-block {
    display: block;
    text-align: center;
  }
  .osgraycta .text .buttons {
    display: block;
    text-align: center;
  }
  .osgraycta .content-img img {
    max-height: 22rem;
    max-width: 22rem;
  }
  .osgraycta .content-img {
    text-align: center;
  }
  .osgraycta.has-bottom-circle {
    padding: 6rem 0 10rem;
  }
  .osgraycta {
    padding: 2rem 0;
  }
  .osgraycta .container {
    max-width: 40rem;
  }
  .osgraycta.has-top-circle {
    padding: 10rem 0 6rem;
  }
  .osgraycta.has-top-circle.has-bottom-circle {
    padding: 10rem 0;
  }
  .osgraycta .title h2 {
    font-size: 3rem;
  }
  .osgraycta .title {
    margin-bottom: 2rem;
  }
  .osgraycta .intro {
    font-size: 1.25rem;
    margin: 0 2rem 3.125rem;
  }
}
@media screen and (max-width: 550px) {
  .osgraycta .container {
    max-width: 22rem;
  }
  .osgraycta.has-bottom-circle {
    padding: 4rem 0 10rem;
  }
  .osgraycta.has-top-circle.has-bottom-circle {
    padding: 10rem 0;
  }
  .osgraycta {
    padding: 4rem 0;
  }
  .osgraycta .title {
    font-size: 1.75rem;
  }
  .osgraycta .title h2 {
    font-size: 2.25rem;
  }
  .osgraycta .intro {
    font-size: 1rem;
    margin: 0 0 2rem;
  }
  .osgraycta .text p {
    font-size: 1rem;
  }
}
@media screen and (max-width: 375px) {
  .osgraycta .container {
    max-width: 20rem;
  }
  .osgraycta .post-block > .text .title {
    font-size: 1.5rem;
    line-height: 1.25;
  }
  .osgraycta.has-bottom-circle {
    padding: 4rem 0 8rem;
  }
  .osgraycta.has-top-circle.has-bottom-circle {
    padding: 8rem 0;
  }
  .osgraycta {
    padding: 4rem 0;
  }
  .osgraycta.has-top-circle {
    padding: 8rem 0 4rem;
  }
  .osgraycta .text .buttons {
    flex-direction: column;
  }
  .osgraycta .text .buttons .btn {
    display: inline-block;
  }
}
@media screen and (max-width: 320px) {
  .osgraycta .container {
    max-width: 18rem;
  }
  .osgraycta .post-block > .text .title {
    font-size: 1.25rem;
    line-height: 1.5;
  }
  .osgraycta .post-block .circle-horizontal.bottom,
  .osgraycta .post-block .circle-horizontal {
    left: auto;
    transform: translate(0%, 50%);
  }
}

/*# sourceMappingURL=style-index.css.map*/