.medical-strains-section {
  z-index: 10;
  .wrapper {
    padding-block: 0 3rem !important;

    .strain-search {
      display: flex;
      width: min(100%, 52rem);
      margin-block: 0 4.8rem;
      border: 2px solid rgb(var(--color-button));

      input {
        width: 100%;
        min-width: 0;
        padding: 1.4rem 1.8rem;
        border: 0;
        background: transparent;
        color: rgb(var(--color-foreground));
        font: inherit;
      }

      button {
        display: grid;
        place-items: center;
        width: 5.2rem;
        flex: 0 0 5.2rem;
        border: 0;
        border-left: 2px solid rgb(var(--color-button));
        background: var(--green);
        color: rgb(var(--color-button));
        cursor: pointer;

        .icon {
          width: 2rem;
          height: 2rem;
        }
      }
    }

    .grid {
      display: grid;
      gap: 2.4rem;

      img {
        margin-block: 2.4rem 1.2rem;
      }

      .custom-strain {
        padding: 2.4rem;
        border: 2px solid rgb(var(--color-button));
        background-color: rgb(var(--color-shadow));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

        &[hidden] {
          display: none;
        }

        .tags {
          display: flex;
          flex-wrap: wrap;
          gap: 0.6rem;
          margin-block: 2.4rem 0;
        }

        .name {
          margin-block: 0;
        }

        .genetics {
          margin-block: 0 1.2rem;
          font-size: 1.4rem;
          opacity: 0.75;
          text-transform: uppercase;
        }

        .rating {
          margin-block: 0.6rem 1.2rem;
        }

        .breeder {
          margin-block: 1.2rem;
          font-size: 1.6rem;
          font-weight: 600;
          opacity: 0.85;
          text-transform: uppercase;
          color: #9bc07d;
        }
      }
    }
  }

  &.layout-horizontal {
    .custom-strain {
      display: flex;
      flex-direction: row-reverse !important;
      align-items: center;
      column-gap: 2.4rem;

      .card-content {
        flex: 1;

        & > .tags {
          grid-row: 2;
        }
      }

      .image-wrapper {
        flex: 1;

        margin-block: auto;

        img {
          grid-row: 1;
          margin-block-start: 0;
        }
      }

      @media (max-width: 700px) {
        .custom-strain {
          display: flex !important;
        }
      }
    }
  }
}