/**
 * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@import "../../utils/styles/Theme.scss";

.home {
  width: 100%;
  height: 100svh;
  .home__body {
    width: 100%;
    height: calc(100svh - 80px);
    overflow: auto;

    .home__body__container {
      min-height: calc(100svh - 80px);

      // Title
      .home__body__title {
        width: 100%;
        height: 100px;

        @include flexbox;

        p {
          font-size: $font-max;
          text-align: center;
        }
      }

      // Cards
      .home__body__cards {
        width: 95%;
        min-height: calc(100svh - 180px);

        @include flexbox;
        align-items: flex-start;
        justify-content: space-around;

        margin: 0px auto;

        padding-top: 40px;

        .home__body__card {
          width: 275px;
          height: 350px;

          .home__body__card__image {
            width: 100%;
            height: 200px;
            @include flexbox;

            img {
              width: 100%;
              object-fit: contain;
            }
          }

          .home__body__card__button {
            width: 100%;
            height: 70px;

            @include flexbox;
          }
        }
      }
    }
  }
}

// Media Queries
@media (width<=1000px) {
  .home {
    .home__body {
      height: unset;

      .home__body__container {
        height: unset;

        .home__body__cards {
          flex-direction: column;
          align-items: center;
          padding: unset;

          .home__body__card {
            margin-bottom: $margin-16;
          }
        }
      }
    }
  }
}
