/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
/* ============================================
=         Country related information         =
============================================ */
@layer sdc {
  .country-related-information {
    --box-shadow: 0 0px 0.25rem 0 rgb(0, 0, 0, 0.1);
    --color-arrow: var(--color-primary);
    padding-block: var(--component-inner-space);
  }
  .country-related-information__content {
    display: flex;
    flex-flow: column wrap;
    row-gap: 2rem;
  }
  @media (width >= 56.3125em) {
    .country-related-information__content {
      flex-flow: row wrap;
      column-gap: 2rem;
    }
  }
  .country-related-information__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--color-grey-three);
    box-shadow: var(--box-shadow);
    row-gap: 1px;
  }

  /* 
      @media (--M) {
        width: calc(50% - 1rem);
      } */
  @media (width >= 56.3125em) {
    .country-related-information__item {
      width: calc(50% - 1rem);
      /* width: calc((100% / 3) - (4rem / 3));
        min-height: 306px; */
    }
  }
  @media (min-width: 75em) {
    .country-related-information__item {
      width: calc(33.33333% - 1.33333rem);
      /* width: calc((100% / 4) - (4rem / 4));
        min-height: 306px; */
    }
  }
  .country-related-information__item__title {
    display: flex;
    align-items: stretch;
    column-gap: 1px;
    border-inline-start: solid 2px var(--color-secondary);
  }
  .country-related-information__item__title__text {
    display: flex;
    flex-grow: 1;
    align-items: center;
    color: var(--color-black-main);
    background-color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2.125rem;
    padding-inline: 1.375rem;
  }
  .country-related-information__item__title__icon {
    --icon-color: var(--color-secondary);
    padding-inline: 1.375rem;
    padding-block: 0.75rem;
    background-color: var(--color-white);
  }
  .country-related-information__item__title__icon svg {
    width: 1.6875rem;
    height: auto;
  }
  .country-related-information__item__count,
  .country-related-information__item__link-custom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 0.5rem;
  }
  .country-related-information__item__count a {
    flex-wrap: wrap;
  }
  .country-related-information__item__links {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-inline-start: solid 2px var(--color-secondary);
    background-color: var(--color-white);
    padding-block: 1.375rem;
    row-gap: 1rem;
  }
  .country-related-information__item__link-icon {
    align-self: center;
    padding-inline-end: 1.375rem;
  }
  .country-related-information__item__link-icon svg {
    transform: rotate(-90deg);
  }

  /* links */
  .country-related-information__item a {
    display: flex;
    padding-inline-start: 1.375rem;
    column-gap: 0.4rem;
    transition: color 0.2s ease-out;
    -webkit-text-decoration: none;
    text-decoration: none;
    letter-spacing: -0.16px;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.25rem;
    padding-block: 0.3125rem;
  }
  .country-related-information__item a:link,
  .country-related-information__item a:visited {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--color-black-main);
  }
  .country-related-information__item a:active,
  .country-related-information__item a:focus,
  .country-related-information__item a:hover {
    color: var(--color-primary);
  }
}