@use "../base" as *;
@use "../abstracts" as *;

.paragraph--type--cta-banner.container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 18px 28px;
  border-radius: 8px;
  @include breakpoint(medium) {
    margin-top: 32px;
    padding: 64px 80px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .field--name-field-media {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    .field__item {
      height: 100%;
    }
    img {
      border-radius: 8px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .field--name-field-logo {
    width: 180px;
    height: 32px;
    margin-bottom: 8px;
    @include breakpoint(small) {
      width: 240px;
      height: 48px;
    }

    @include breakpoint(large) {
      width: 360px;
      height: 64px;
    }
  }

  .field--name-field-title {
    color: white;
    font-family: $font-primary;
    font-weight: 500;
    font-size: 0.75rem;

    @include breakpoint(small) {
      line-height: 2.625rem;
      font-size: 1rem;
    }

    @include breakpoint(medium) {
      font-size: 1.125rem;
    }

    @include breakpoint(large) {
      font-size: 1.688rem;
    }

    @include breakpoint(extra_large) {
      font-size: 2.25rem;
    }
  }

  button,
  .button {
    color: white;

    a {
      padding: 8px 10px;
      gap: 2px;

      @include breakpoint(small) {
        padding: 16px 20px;
        gap: 8px;
      }

      border-radius: 4px;
      color: white;
      font-family: $font-primary;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1rem;
      display: flex;

      &::after {
        display: flex;
        content: "";
        width: 16px;
        height: 16px;
        background-image: url("/themes/custom/gto/assets/icons/arrow-right-white.svg");
      }
    }

    &.green a {
      background: $brand-green;
    }

    &.blue a {
      background: $brand-blue;
    }

    &.red a {
      background: $brand-red;
    }

    &.orange a {
      background: $brand-orange;
    }
  }
}