.webinar-banner-container {
  container: webinar-banner/inline-size;
}

.webinar-banner {
  --padding: 60px;
  color: var(--color-blue-dark-special);
  border-radius: 12px;
  background: linear-gradient(269deg, #DFE3FF 0%, #F3F4FC 100%);
  padding: var(--padding);
  display: grid;
  place-items: start;
  gap: 24px;
  grid-template-columns: max-content 1fr;
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: ".          image" "title      image" "subtitle   image" "cta        image" ".          image";
  min-height: 320px;
  overflow: clip;
}
@container (width < 1080px) {
  .webinar-banner {
    --padding: 32px;
  }
}
@container (width < 600px) {
  .webinar-banner {
    text-align: center;
    place-items: center;
    grid-template-areas: "title" "subtitle" "cta" "image";
    grid-template-columns: auto;
    grid-template-rows: auto;
  }
}
.webinar-banner p, .post-content .webinar-banner p {
  margin: 0;
  color: inherit;
  font-family: var(--font-family-title);
  text-align: inherit;
  line-height: 1.2;
}
.webinar-banner .title {
  grid-area: title;
  font-size: 40px;
  font-weight: 500;
}
@container (width < 1080px) {
  .webinar-banner .title {
    font-size: 26px;
  }
}
.webinar-banner .subtitle {
  grid-area: subtitle;
  font-size: 20px;
  font-weight: 400;
}
.webinar-banner .cta {
  grid-area: cta;
  font-family: var(--font-family-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-white);
  background-color: #3C3679;
  padding: 0.67em 2.5em;
  border-radius: 6px;
}
.webinar-banner .cta:hover {
  background-color: #494394;
}
.webinar-banner .image {
  grid-area: image;
  position: relative;
  min-width: calc(var(--padding) * 3 + 100%);
  min-height: calc(var(--padding) * 2 + 100%);
  align-self: end;
  display: grid;
  place-items: end;
  place-content: end;
  margin: calc(var(--padding) * -1);
  -webkit-margin-start: calc(var(--padding) * -2);
          margin-inline-start: calc(var(--padding) * -2);
}
.webinar-banner .image img {
  position: absolute;
}
@container (width < 600px) {
  .webinar-banner .image {
    min-width: calc(var(--padding) * 2 + 100%);
    min-height: 0;
    margin-top: 0;
    margin-inline: calc(var(--padding) * -1);
  }
  .webinar-banner .image img {
    position: relative;
  }
}
/*# sourceMappingURL=webinar-banner.css.map */