/**
 * The base file that should be imported by every file.
 * There should be no CSS generation in this or from imported scss files at all!
 */
/**
 * Library
 */
/**
 * Variables and functions
 */
[id^="section-content-tiles-"] .tiles-container {
  transition: max-height 0.4s ease; }
  [id^="section-content-tiles-"] .tiles-container.has-max-height {
    max-height: 700px;
    overflow: hidden; }
  [id^="section-content-tiles-"] .tiles-container.is-expanded {
    overflow: unset; }

[id^="section-content-tiles-"] .tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em; }
  @media (min-width: 981px) {
    [id^="section-content-tiles-"] .tiles {
      grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 981px) {
    [id^="section-content-tiles-"] .tiles.tiles-2 {
      grid-template-columns: repeat(2, 1fr); } }
  [id^="section-content-tiles-"] .tiles .tile {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 1em;
    background: rgba(255, 255, 255, 0.17);
    border-radius: 16px; }
    [id^="section-content-tiles-"] .tiles .tile h3 {
      margin-top: 0; }
    [id^="section-content-tiles-"] .tiles .tile .thumb {
      width: 100%;
      position: relative;
      height: 200px;
      border-radius: 16px; }
      [id^="section-content-tiles-"] .tiles .tile .thumb img {
        -o-object-fit: cover;
           object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
    [id^="section-content-tiles-"] .tiles .tile a.btn {
      width: 100%;
      margin-top: auto; }

[id^="section-content-tiles-"] .tiles-toggle {
  margin: 1.5rem auto 0;
  display: block; }
  [id^="section-content-tiles-"] .tiles-toggle span {
    position: relative;
    top: 2px; }

[id^="section-content-tiles-"].green {
  background: #b3dfa4; }
  [id^="section-content-tiles-"].green h2, [id^="section-content-tiles-"].green h3, [id^="section-content-tiles-"].green .h2, [id^="section-content-tiles-"].green .h3 {
    color: #000; }

[id^="section-content-tiles-"].purple {
  background: #dcb9cf; }
  [id^="section-content-tiles-"].purple h2, [id^="section-content-tiles-"].purple h3, [id^="section-content-tiles-"].purple .h2, [id^="section-content-tiles-"].purple .h3 {
    color: #000; }

[id^="section-content-tiles-"].orange {
  background: #f8cfa6; }
  [id^="section-content-tiles-"].orange h2, [id^="section-content-tiles-"].orange h3, [id^="section-content-tiles-"].orange .h2, [id^="section-content-tiles-"].orange .h3 {
    color: #000; }

/*# sourceMappingURL=content-tiles.css.map */