.paragraph--bento {
  --background--1: var(--background--background-dark);
  --background--2: var(--c--gray--light);
  --background--3: var(--c--primary);
  --background--4: var(--background--background-dark);
}
.paragraph--bento .paragraph-content {
  padding-block: var(--spacing--4);
  overflow: hidden;
  background-color: var(--c--white);
}
@media (max-width: 991px) {
  .paragraph--bento .paragraph-content {
    padding-block: var(--spacing--5);
  }
}
.paragraph--bento--list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing--2);
}
.paragraph--bento--card--1 {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing--3);
  padding: var(--spacing--2);
  border-radius: var(--radius--3);
  color: var(--c--white);
  background-color: var(--background--1);
}
@media (min-width: 992px) {
  .paragraph--bento--card--1 {
    padding-bottom: var(--spacing--4);
  }
}
.paragraph--bento--card--1--image {
  border-radius: var(--radius--2);
  overflow: hidden;
}
.paragraph--bento--card--1--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paragraph--bento--card--1--text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--1);
}
.paragraph--bento--card--1--category strong {
  display: inline-block;
  padding: calc(var(--spacing--1) * 0.5) var(--spacing--1);
  border-radius: 0.4rem;
  color: var(--background--1);
  background-color: var(--background--2);
}
@media (min-width: 992px) {
  .paragraph--bento--card--1--text,
  .paragraph--bento--card--1 .cta-wrapper {
    padding-inline: var(--spacing--2);
  }
}
.paragraph--bento--card--1 .cta-wrapper {
  margin-top: auto;
}
.paragraph--bento--card--1 .btn {
  --btn-height: 5.4rem;
}
.paragraph--bento--element--1 {
  grid-row: 2;
  grid-column: 1;
}
.paragraph--bento--element--2 {
  grid-row: 3;
  grid-column: 1;
}
.paragraph--bento--element--3 {
  grid-row: 4;
  grid-column: 1;
}
.paragraph--bento .paragraph--bento--card--small {
  display: flex;
  align-items: stretch;
  gap: var(--spacing--3);
  padding: var(--spacing--2);
  border-radius: var(--radius--3);
  overflow: hidden;
  background-color: var(--background--2);
  position: relative;
  height: 100%;
}
.paragraph--bento .paragraph--bento--card--small h2, .paragraph--bento .paragraph--bento--card--small h3, .paragraph--bento .paragraph--bento--card--small h4, .paragraph--bento .paragraph--bento--card--small h5, .paragraph--bento .paragraph--bento--card--small h6 {
  font-weight: 600;
}
.paragraph--bento .paragraph--bento--card--small > div {
  flex: 1;
}
.paragraph--bento .paragraph--bento--card--small--image {
  border-radius: var(--radius--2);
  overflow: hidden;
  min-width: 30%;
}
.paragraph--bento .paragraph--bento--card--small--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease-in-out;
}
@media (max-width: 767px) {
  .paragraph--bento .paragraph--bento--card--small--image {
    display: none;
  }
}
.paragraph--bento .paragraph--bento--card--small--text-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing--2);
}
.paragraph--bento .paragraph--bento--card--small--text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--2);
}
.paragraph--bento .paragraph--bento--card--small .cta-wrapper .btn {
  --btn-bg: var(--c--white);
  --btn-color: var(--c--black);
  --btn-border: var(--c--white);
  --btn-hover-bg: var(--button--primary-hover);
  --btn-hover-color: var(--c--white);
  --btn-hover-border: var(--button--primary-hover);
}
.paragraph--bento .paragraph--bento--card--small a {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
}
.paragraph--bento .paragraph--bento--card--small:hover .btn, .paragraph--bento .paragraph--bento--card--small:active .btn {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border);
}
.paragraph--bento .paragraph--bento--images {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: var(--spacing--2);
  font-size: 0;
}
.paragraph--bento .paragraph--bento--images .paragraph--bento--image {
  border-radius: var(--radius--3);
  overflow: hidden;
}
.paragraph--bento .paragraph--bento--images .paragraph--bento--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .paragraph--bento .paragraph--bento--images .paragraph--bento--image {
    aspect-ratio: 103/112;
  }
}
.paragraph--bento .paragraph--bento--cta {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: var(--spacing--2);
}
.paragraph--bento .paragraph--bento--cta > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing--1);
  padding: var(--spacing--2);
  border-radius: var(--radius--3);
  overflow: hidden;
}
.paragraph--bento .paragraph--bento--cta > div h2, .paragraph--bento .paragraph--bento--cta > div h3, .paragraph--bento .paragraph--bento--cta > div h4, .paragraph--bento .paragraph--bento--cta > div h5, .paragraph--bento .paragraph--bento--cta > div h6, .paragraph--bento .paragraph--bento--cta > div p {
  font-size: var(--typography--font-size--lg);
  font-weight: 600;
}
@media (max-width: 991px) {
  .paragraph--bento .paragraph--bento--cta > div h2, .paragraph--bento .paragraph--bento--cta > div h3, .paragraph--bento .paragraph--bento--cta > div h4, .paragraph--bento .paragraph--bento--cta > div h5, .paragraph--bento .paragraph--bento--cta > div h6, .paragraph--bento .paragraph--bento--cta > div p {
    font-size: var(--typography--font-size--md);
    font-weight: 700;
  }
}
.paragraph--bento .paragraph--bento--cta > div .cta-wrapper {
  justify-content: flex-end;
}
.paragraph--bento .paragraph--bento--cta > div .cta-wrapper .btn {
  --btn-bg: var(--c--white);
  --btn-color: var(--c--black);
  --btn-border: var(--c--white);
  --btn-hover-bg: var(--button--primary-hover);
  --btn-hover-color: var(--c--white);
  --btn-hover-border: var(--button--primary-hover);
}
.paragraph--bento .paragraph--bento--cta .paragraph--bento--cta--inner {
  position: relative;
}
.paragraph--bento .paragraph--bento--cta .paragraph--bento--cta--inner a {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
}
.paragraph--bento .paragraph--bento--cta .paragraph--bento--cta--inner:first-child {
  color: var(--c--black);
  background-color: var(--background--2);
}
.paragraph--bento .paragraph--bento--cta .paragraph--bento--cta--inner:last-child {
  color: var(--c--white);
  background-color: var(--background--4);
}
.paragraph--bento .paragraph--bento--cta .paragraph--bento--cta--inner:hover .btn, .paragraph--bento .paragraph--bento--cta .paragraph--bento--cta--inner:active .btn {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border);
}
@media (min-width: 992px) {
  .paragraph--bento--list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    gap: var(--spacing--2);
  }
  .paragraph--bento--card--1 {
    grid-row: 1/span 3;
    grid-column: 1;
  }
  .paragraph--bento--element--1 {
    grid-row: 1;
    grid-column: 2;
  }
  .paragraph--bento--element--2 {
    grid-row: 2;
    grid-column: 2;
  }
  .paragraph--bento--element--3 {
    grid-row: 3;
    grid-column: 2;
  }
}
/*# sourceMappingURL=paragraph--bento.css.map */