:root {
  --button-color: #7E7367;
  --button-color-hover: #464039;
  --button-color-active: #38332E;
  --button-color-disabled: #D8D4CF;
  --button-color-disabled-background: #F8F7F7;
  --button-color-secondary-background: #D8D4CF; }

.card-resource {
  background-color: #F8F7F7;
  border-radius: 8px;
  height: 112px;
  max-width: 340px; }
  @media (min-width: 768px) {
    .card-resource {
      height: 144px;
      max-width: 450px; } }
  .card-resource.card-resource--video {
    height: 84px; }
    .card-resource.card-resource--video .card-resource__image {
      width: 112px;
      height: 84px; }
      .card-resource.card-resource--video .card-resource__image img {
        aspect-ratio: 4 / 3; }
    .card-resource.card-resource--video .card-resource__text {
      width: calc(100% - 112px); }
      .card-resource.card-resource--video .card-resource__text-title {
        font-size: 14px; }
  .card-resource__image {
    width: 112px;
    height: 112px; }
    @media (min-width: 768px) {
      .card-resource__image {
        width: 144px;
        height: 144px; } }
    .card-resource__image img {
      border-radius: 8px; }
    .card-resource__image .image-icon {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid #464039;
      border-radius: 1000px;
      width: 32px;
      height: 32px; }
      .card-resource__image .image-icon--exclusive {
        top: 8px;
        left: 8px;
        transform: none; }
        .card-resource__image .image-icon--exclusive svg {
          background: #464039; }
          @media (min-width: 768px) {
            .card-resource__image .image-icon--exclusive svg {
              width: 40px;
              height: 40px; } }
      .card-resource__image .image-icon--play svg {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 1000px;
        width: 16px;
        height: 16px; }
        .card-resource__image .image-icon--play svg path {
          fill: #464039; }
  .card-resource__text {
    font-family: "Ubuntu", sans-serif;
    color: #464039;
    font-size: 14px;
    font-weight: 600;
    line-height: 136%;
    width: calc(100% - 112px); }
    @media (min-width: 768px) {
      .card-resource__text {
        font-size: 16px;
        width: calc(100% - 144px); } }
    .card-resource__text .card-resource__text-time {
      color: #9F9389;
      font-weight: 400; }
    .card-resource__text .card-resource__text-button {
      color: #464039; }
      .card-resource__text .card-resource__text-button svg path {
        fill: #464039; }
  .card-resource[disabled] {
    cursor: default;
    opacity: 0.5; }
  .card-resource__description {
    font-family: "Ubuntu", sans-serif;
    color: #464039;
    font-size: 14px;
    font-weight: 400;
    line-height: 136%;
    width: 340px; }
    @media (min-width: 768px) {
      .card-resource__description {
        width: 550px; } }
  .card-resource__video {
    top: 0;
    left: 0;
    z-index: 1020; }
    @media (min-width: 768px) {
      .card-resource__video {
        background-color: #38332e66; } }
    .card-resource__video-card {
      width: 100%;
      height: 100%;
      padding: 24px; }
      @media (min-width: 768px) {
        .card-resource__video-card {
          max-width: 700px;
          height: auto;
          border-radius: 16px;
          padding: 24px 40px 40px; } }
      .card-resource__video-card .video-close {
        position: absolute;
        cursor: pointer;
        width: fit-content;
        top: 24px;
        right: 24px;
        background: #F8F7F7;
        border-radius: 1000px;
        height: 44px; }
        @media (min-width: 768px) {
          .card-resource__video-card .video-close {
            position: relative;
            align-self: end;
            top: unset;
            right: unset; } }
        .card-resource__video-card .video-close svg {
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%); }
      .card-resource__video-card iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; }
  .card-resource.card-resource--size-small {
    height: 64px; }
    .card-resource.card-resource--size-small .card-resource__image {
      width: 64px;
      height: 64px; }
    .card-resource.card-resource--size-small .image-icon--exclusive svg {
      width: 24px;
      height: 24px; }
    .card-resource.card-resource--size-small .card-resource__text {
      width: calc(100% - 64px); }

.card-resource.card-resource--pet-type-dog,
[data-pet-world="Dog"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat),
body[data-color-site="dogColor"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) {
  background-color: #F9F2EC; }
  .card-resource.card-resource--pet-type-dog .card-resource__text .card-resource__text-button,
  [data-pet-world="Dog"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .card-resource__text .card-resource__text-button,
  body[data-color-site="dogColor"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .card-resource__text .card-resource__text-button {
    color: #936031; }
  .card-resource.card-resource--pet-type-dog .card-resource__text svg path,
  [data-pet-world="Dog"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .card-resource__text svg path,
  body[data-color-site="dogColor"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .card-resource__text svg path {
    fill: #936031; }
  .card-resource.card-resource--pet-type-dog .image-icon,
  [data-pet-world="Dog"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .image-icon,
  body[data-color-site="dogColor"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .image-icon {
    border-color: #936031; }
    .card-resource.card-resource--pet-type-dog .image-icon--exclusive svg,
    [data-pet-world="Dog"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .image-icon--exclusive svg,
    body[data-color-site="dogColor"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .image-icon--exclusive svg {
      background: #936031; }
    .card-resource.card-resource--pet-type-dog .image-icon.image-icon--play svg path,
    [data-pet-world="Dog"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .image-icon.image-icon--play svg path,
    body[data-color-site="dogColor"] .card-resource:not(.card-resource--pet-type-cat):not(.card-resource--pet-type-dog-and-cat) .image-icon.image-icon--play svg path {
      fill: #936031; }

.card-resource.card-resource--pet-type-cat,
[data-pet-world="Cat"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat),
body[data-color-site="catColor"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) {
  background-color: #F0F6EE; }
  .card-resource.card-resource--pet-type-cat .card-resource__text .card-resource__text-button,
  [data-pet-world="Cat"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .card-resource__text .card-resource__text-button,
  body[data-color-site="catColor"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .card-resource__text .card-resource__text-button {
    color: #4A773C; }
    .card-resource.card-resource--pet-type-cat .card-resource__text .card-resource__text-button svg path,
    [data-pet-world="Cat"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .card-resource__text .card-resource__text-button svg path,
    body[data-color-site="catColor"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .card-resource__text .card-resource__text-button svg path {
      fill: #4A773C; }
  .card-resource.card-resource--pet-type-cat .image-icon,
  [data-pet-world="Cat"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .image-icon,
  body[data-color-site="catColor"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .image-icon {
    border-color: #4A773C; }
    .card-resource.card-resource--pet-type-cat .image-icon--exclusive svg,
    [data-pet-world="Cat"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .image-icon--exclusive svg,
    body[data-color-site="catColor"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .image-icon--exclusive svg {
      background: #4A773C; }
    .card-resource.card-resource--pet-type-cat .image-icon.image-icon--play svg path,
    [data-pet-world="Cat"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .image-icon.image-icon--play svg path,
    body[data-color-site="catColor"] .card-resource:not(.card-resource--pet-type-dog):not(.card-resource--pet-type-dog-and-cat) .image-icon.image-icon--play svg path {
      fill: #4A773C; }

/*# sourceMappingURL=cardResource.css.map*/