/*START:___submenu___*/
@use "../../abstracts/mixins" as *;
@use "../../vendors/bootstrap" as *;

.linked-menu {

  &__subtitle {
    grid-area: linked-menu-subtitle;
  }

  &__title {
    grid-area: linked-menu-title;
  }

  &__description {
    grid-area: linked-menu-description;
  }

  &__image {
    grid-area: linked-menu-image;
    overflow: hidden;
    align-self: center;
    border: var(--ev-img-border-width, 1px) var(--ev-img-border-style)
      var(--ev-img-border-color);
    box-shadow: var(--ev-img-border-box-shadow, none);
    width: 100%;

    @include media-breakpoint-up(md) {
      border-radius: var(--ev-img-border-radius-lg, var(--ev-border-radius));
    }

    img {
      width: 100%;
    }
  }

  &__btn-wrapper {
    grid-area: linked-menu-btn;
  }

  &__item {
    display: grid;
    grid-template-areas: "linked-menu-subtitle" "linked-menu-title" "linked-menu-image" "linked-menu-description" "linked-menu-btn";
    column-gap: var(--ev-grid-gutter, 1rem);
    margin-top: var(--ev-space-2xl);

    @include media-breakpoint-up(lg) {
      &:nth-child(2n):not(.no-img) {
        grid-template-areas: ".. linked-menu-image" "linked-menu-subtitle linked-menu-image" "linked-menu-title linked-menu-image" "linked-menu-description linked-menu-image" "linked-menu-btn linked-menu-image" ".. linked-menu-image";
        grid-template-columns: minmax(50%, 1fr) minmax(300px, 600px);
        grid-template-rows: 1fr repeat(4, min-content) 1fr;
      }

      &:nth-child(2n + 1):not(.no-img) {
        grid-template-areas: "linked-menu-image .." "linked-menu-image linked-menu-subtitle" "linked-menu-image linked-menu-title" "linked-menu-image linked-menu-description" "linked-menu-image linked-menu-btn" "linked-menu-image ..";
        grid-template-columns: minmax(300px, 600px) minmax(50%, 1fr);
        grid-template-rows: 1fr repeat(4, min-content) 1fr;
      }
    }
  }
}
/*END:___submenu___*/