frontend/src/components/JourneyCard.module.css

/*
# Copyright 2025 Google LLC
#
# Licensed 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.
*/

.card {
  width: 100%;
  max-width: 452px;
  background: white;
  border-radius: 14px;
  border: 2px #E9E9E9 solid;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.cardImage {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.cardFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: white;
  border-top: 2px #E9E9E9 solid;
}

.label {
  color: black;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 24px;
}

.launchButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  background: #0B57D0;
  color: white;
  border: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-text);
  cursor: pointer;
  transition: background-color 0.2s;
}

.launchButton:hover {
  background: #0a4ab5;
}

.buttonIcon {
  width: 20px;
  height: 20px;
  fill: white;
}