/*
* @author  Agence Dn'D <contact@dnd.fr>
* @license https://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
* @link    https://www.dnd.fr/
*/

.sesashop-image-with-text-overlay-container {
  display: flex;
  flex-direction: column;
  gap: var(--gutter-mobile);

  .sesashop-image-with-text-overlay-column {
    border-radius: var(--btn-border-radius);
    overflow: hidden;
  }

  .sesashop-image-with-text-overlay-column-inner {
    padding: var(--gutter-large-bis);
  }

  .text-overlay__inner {
    padding: var(--gutter-large-bis);
  }

  .text-overlay__title,
  .majortitle {
    margin: 0;
  }

  .rte {
    max-width: 420px;
    margin-block: var(--gutter-lg);

    p {
      font-size: var(--smaller-text-size-2);
      font-weight: var(--font-weight-700);
    }
  }

  .text-overlay__button-row {
    display: flex;
    flex-direction: column;
    gap: var(--gutter-mobile);
    margin: 0;

    .btn {
      width: fit-content;
      margin: 0;
    }

    .btn--primary {
      background: var(--color-white);
      color: var(--color-black-opacity-90);

      &:is(:hover, :focus, :active) {
        color: var(--color-primary);
      }
    }

    .btn--secondary {
      backdrop-filter: blur(40px);
      background: var(--color-white-opacity-20);
      outline: 1px solid var(--color-white) !important;

      &:is(:hover, :focus, :active) {
        background: var(--color-white);
        color: var(--color-primary);
      }
    }
  }

  .subheading {
    margin-block-end: var(--gutter-mobile);
    color: var(--color-primary-950);
    font-size: var(--smaller-text-size-2);
    font-weight: var(--font-weight-700);
    text-transform: uppercase;
  }

  .majortitle {
    font-size: var(--larger-mobile-text-size);
  }
}

@media (max-width: 768.98px) {
  .sesashop-image-with-text-overlay-container {
    .text-overlay {
      align-items: flex-start;
    }
  }
}

@media (min-width: 1024px) {
  .sesashop-image-with-text-overlay-container {
    flex-direction: row;

    .sesashop-image-with-text-overlay-column {
      &:nth-child(1) {
        flex: 1;
      }

      &:nth-child(2) {
        display: grid;
        place-content: center;
        width: 32.5%;
      }
    }

    .text-overlay__button-row {
      flex-direction: row;
    }
  }
}