.image-with-text-tabs{
  .image-with-text-tabs__tabs{
    --padding: 11px;
    --def-tabs-width: 140px;
    width: fit-content;
    border-radius: var(--base-radius);
    margin: 0 auto;
    position: relative;
    padding: var(--padding) 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 350px;

    @media (min-width: 769px){
      --def-tabs-width: 240px;
      max-width: unset;
    }

    &:after{
      content: '';
      position: absolute;
      left: var(--tab-left, 16px);
      top: var(--tab-top, var(--padding));
      width: var(--tab-width, var(--def-tabs-width));
      height: var(--tab-height, calc(100% - calc(var(--padding) * 2)));
      border-radius: var(--base-radius);
      background-color: var(--BTN-PRIMARY-BG);
      transition: var(--trans);
    }

    .tab{
      position: relative;
      padding: 10px 16px;
      z-index: 2;
      transition: var(--trans);
      text-transform: var(--FONT-UPPERCASE-SUBHEADING);
      border-radius: inherit;
      font-weight: var(--FONT-WEIGHT-HEADING);
      font-size: 14px;

      @media (min-width: 769px){
        min-width: var(--def-tabs-width);
        padding: 10px 40px;
        font-size: var(--font-heading-small);
      }

      &[aria-expanded="true"]{
        color: var(--BTN-PRIMARY-TEXT);
      }
    }
  }

  .image-with-text-tabs__contents{
    border-radius: var(--base-radius);

    .modal--info{
      background-color: var(--bg);
      color: var(--text);
    }

    .content, .content--grid{
      margin-top: var(--outer);

      &[aria-hidden="true"]{
        display: none;
      }

      .image{
        overflow: hidden;
        margin: 0;

        * {
          border-radius: unset;
        }

        .image__hero--url{
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;

          @media (min-width: 1024px){
            height: auto;
            width: auto;
          }
        }
      }

      .title{
        font-family: var(--FONT-STACK-BODY);
        font-weight: 600;
        text-transform: uppercase;
      }
    }

    .content--grid{
      position: relative;
      padding: 24px;

      .tile{
        flex-grow: 1;

        @media (min-width: 1024px){
          max-width: calc(100% / 4);
          flex-basis: 100%;
        }
      }

      .descr{
        margin-bottom: var(--gutter);
      }

      .flex{
        gap: 1rem;
        flex-wrap: wrap;

        @media (min-width: 1024px){
          flex-wrap: nowrap;
        }
      }

      .tile__image{
        aspect-ratio: 1 / 1;
        border-radius: var(--base-radius);
        overflow: hidden;

        img{
          max-width: 100%;
        }
      }

      .tile__header{
        font-family: var(--FONT-STACK-BODY);
        font-weight: var(--FONT-WEIGHT-BODY-BOLD);
        margin-top: var(--gutter);
      }

      .modal__button{
        margin-top: var(--outer);
        width: fit-content;
        margin-left: auto;
      }

      .modal--info{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: calc(var(--base-radius) - 4px);
        padding: 40px var(--inner);
        width: calc(100% - var(--outer) * 2);
        height: calc(100% - var(--outer) * 2);
        z-index: 1;
        display: none;
        overflow: hidden;

        @media(min-width: 1024px){
          padding: 60px;
        }

        &[open]{
          display: grid;
          grid-template-rows: auto 1fr;
        }

        .close{
          --icon-size: 40px;
          position: inherit;
          top: 40px;
          right: var(--inner);

          @media(min-width: 1024px){
           top: 60px;
           right: 60px;
          }
        }

        .content{
          overflow-x: auto;
          margin: 0;
        }

        table{
          margin-bottom: var(--gutter);

          * {
            white-space: wrap;

            @media(max-width: 479px){
              width: 100%;
            }
          }
        }
      }
    }
  }
}