[data-component-id="skywin:sector_card"] {
  /* @todo Add your styles here. */

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  aspect-ratio: 302/439;
  overflow: hidden;

  &.square{
    aspect-ratio: 1/1;
  }
  &.landscape{
    aspect-ratio: 439/302;
  }

  :is(.media, .content){
    grid-area: 1 / 1 / 2 / 2;
  }

  .layout-builder__section & {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;

    & :is(.media, .content){
      grid-area: auto;
    }
  }

  &:hover{
    .media :is(img,picture){

      transform: scale(1.075);
    }
  }
  .media{
    & :is(.block, .field, .field-item, .field-items){
      display: contents;
    }
    & :is(img,picture){
      transition: all .33s ease-in-out;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .content{
    padding: 1.875rem;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 50px;
    grid-template-rows: 1fr 50px;
    background: linear-gradient(to bottom, oklch( from var(--color-blue) l c h / 80%) 0%, oklch( from var(--color-blue) l c h / 20%) 33% , oklch( from var(--color-blue) l c h / 0%) 100%);

    .layout-builder__section &{
      grid-template-columns: 1fr 1fr;
    }

    .icon, .more {

      grid-column: 2;
    }

    .title{
      a{
        color :#fff;
      }
      --lp-heading-fw: 600;
      --lp-h3-fs : 2.85rem;
      --lp-heading-ls: -0.03em;
      --lp-heading-color: #fff;

    }

    .more{
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      background: transparent;
      color: #fff;
      border-radius: .66rem;
      border: 1px solid #fff;
      transition: all .2s ease-in-out;
      &:hover{
        background: #fff;
        color: #000;
      }

    }
  }

}