/* card-layout.css */

/* Apply border-box sizing to all elements for consistent padding and borders */
* {
    box-sizing: border-box;
}

/* Wrapper for the entire card layout section */
.card-layout-wrapper {
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
    padding: 20px; /* Adds space around the container */
}

/* Container for the grid layout of cards */
.card-layout-container {
    display: grid;
    gap: 20px; /* Space between each card */
    justify-content: center; /* Center grid items horizontally */
    grid-template-columns: repeat(4, 1fr); /* Default to 4 columns on large screens */
}

/* Individual card styling */
.card-layout-item {
    background-color: #ffffff; /* White background for a clean look */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    overflow: hidden; /* Prevent content from overflowing rounded corners */
}

/* Image styling inside each card */
.card-layout-item img {
    width: 100%; /* Image spans full width of the card */
    height: auto;
    display: block;
    object-fit: cover; /* Scales image to fill container without distortion */
    border-radius: 10px; /* Add rounded corners to image */
}

/* Text/paragraph below each image */
.card-layout-item p {
    margin: 10px;
    text-align: left; /* Align text to the left */
    font-size: 16px;
}

/* Uniform left alignment for headings and paragraphs */
.card-layout-item :where(h1,h2,h3,h4,h5,h6,p) {
  text-align: left;
  margin: 10px;
}

/* Medium screens: show 3 columns */
@media (max-width: 1260px) {
    .card-layout-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Small screens: show 2 columns */
@media (max-width: 768px) {
    .card-layout-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Extra small screens: stack into 1 column */
@media (max-width: 480px) {
    .card-layout-container {
        grid-template-columns: 1fr;
    }
}