[data-component-id="kackaamin:circle_banner"] {
  container-type: inline-size;
  --thickness: 2.5cqi;

  display: grid;
  overflow: hidden;
  border-radius: 50%;
  grid-template-columns: 1fr 1fr;
  background-color: var(--bg-tertiary);
  gap: var(--thickness);
  border: var(--thickness) solid var(--bg-tertiary);


  & .circle-banner__link {
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    font-size: min(5cqi, 40px);
    font-weight: bolder;
    font-family: var(--font-laila), serif;
    box-sizing: border-box;

    background: var(--bg-secondary) var(--background-image) no-repeat center / cover;
    background-blend-mode: multiply;
  }

  & .circle-banner__link-top {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;

    justify-content: end;
    padding: 0 5% 15%;
  }

  & .circle-banner__link-bottom-left,
  & .circle-banner__link-bottom-right {
    aspect-ratio: 1 / 1;
  }


  & .circle-banner__link-bottom-left {
    padding: 10% 10% 10% 20%;
  }

  & .circle-banner__link-bottom-right {
    padding: 10% 20% 10% 10%;
  }
}