:root {
    --featured-image-width: 60%;
}

#feature-image {
    width: 100%;
    height: var(--featured-image-height);
}

#feature-image-container {
    width: var(--featured-image-width);
}

#feature-details {
    width: calc(100% - var(--featured-image-width));
    padding: 25px;
}

#feature-platform-container {
    display: flex;
    gap: 5px;
}

#feature-price {
    color: var(--feature-price-colour);
    font-size: 36pt;
    margin-bottom: 5px;
}

#feature-description {
    text-align: justify;
}

#feature-more-button {
    margin-top: 30px;
}

.card-title {
    margin-bottom: 5px;
    cursor: pointer;
}

.card-title:hover {
    color: var(--colour-primary);
}

.card-price {
    color: var(--feature-price-colour);
    font-size: 24pt;
    margin-top: 5px;
    margin-bottom: 5px;
}

.card-image {
    width: 210px;
    height: 300px;
    outline: 1px solid gray;
    background-image: url("../images/icon-coloured.png");
    background-size: 100% 100%;
    padding: 15px;
    display: flex;
    justify-content: end;
}

.card-platform-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.deal-section {
    padding: 25px;
    margin-bottom: 10px;
}

.card-container {
    display: flex;
    gap: 20px;
    overflow-x: scroll;
}

.deal-card {
    width: 230px;
    padding: 10px;
}