.productions-subpanels {
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Align items to the start (left) */
    width: 100%; /* Uses the full width of its parent container */
}

.production-subpanel {
    background-color: #e0e0e0;
    border-radius: 5px;
    width: 65%; /* Adjusts the width to be 80% of the parent container */
    height: auto; /* Adjusts height based on content */
    max-height: 400px; /* Limits maximum height for consistency */
    margin-bottom: 20px; /* Space between each card */
    display: flex; /* Enables flexbox layout */
    align-items: flex-start; /* Aligns items to the start vertically */
}

.production-subpanel img {
    width: 32px;          /* размер кружка */
    height: 32px;         /* важно: квадрат */
    object-fit: cover;    /* чтобы не растягивалось */
    border-radius: 50%;   /* круг */
    margin-right: 20px;
    margin-top: 5px;
    flex-shrink: 0;       /* чтобы flex не сжимал картинку */
}

.production-details {
    display: flex;
    flex-direction: column; /* Stacks title, company, and time vertically */
    align-items: flex-start; /* Aligns items to the start */
}

.production-description {
    margin-top: 10px; /* Add space between details and description */
}

.production-content {
    flex-grow: 1; /* Allows the description to take remaining space */
    display: flex;
    flex-direction: column; /* Optionally control layout of the description */
    justify-content: flex-start; /* Aligns description to the start */
}

.productions-panel {
    border-radius: 5px;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align items to the start (left) */
    text-align: left; /* Align text to the left */
    margin-bottom: 20px;
    background-color: #e0e0e0;
    width: 100%;
}

.productions-panel h1 {
    margin-bottom: 10px;
}

.production-subpanel h2 {
    font-size: 16px; /* Font size for the title */
    color: #1f1f1f; /* Text color */
    text-align: left; /* Aligns text to the left */
}

.production-subpanel p {
    margin: 5px 0; /* Margins for spacing */
    color: grey; /* Text color */
    text-align: left; /* Aligns text to the left */
}

.production-subpanel p {
    font-size: 14px; /* Font size for the paragraphs */
}

.panel-title {
  width: 65%;
}

.production-subpanel .production-time {
  margin: 0;
}


@media (max-width: 600px) {
    .production-subpanel {
        width: 90%; /* Increase width to better fit mobile screens */
        margin-bottom: 15px; /* Adjust margin for better spacing on mobile */
        display: grid; /* Use grid layout */
        grid-template-columns: auto 1fr; /* Two columns: one for image, one for details */
        grid-template-rows: auto auto; /* Two rows: one for image/details, one for description */
        gap: 5px 10px; /* Space between grid items */
        align-items: start; /* Align items to the start */
        /* padding: 10px; Add padding to ensure content has space */
        background-color: #e0e0e0; /* Background color */
        border-radius: 5px; /* Border radius for rounded corners */
    }

    .production-subpanel img {
        width: 32px; /* Adjust the image width for mobile */
        height: auto; /* Maintain aspect ratio */
        grid-column: 1; /* Image in the first column */
        grid-row: 1; /* Image in the first row */
        align-self: start; /* Align image to the start of the cell */
    }

    .production-details {
        align-items: flex-start; /* Align text to the start */
        text-align: left; /* Ensure text is aligned to the left */
        grid-column: 2; /* Details in the second column */
        grid-row: 1; /* Details in the first row */
        margin-left: -15px;
    }

    .production-description {
        align-items: flex-start; /* Align content to the start */
        text-align: left; /* Ensure text is aligned to the left */
        margin-top: 0px; /* Add space between details and description */
        grid-column: 1 / 3; /* Description spans both columns */
        grid-row: 2; /* Description in the second row */
    }

    .production-content {
        display: contents; /* Allow direct child elements to follow the grid */
    }

    .productions-panel {
        padding: 10px; /* Adjust padding for mobile */
        margin-bottom: 15px; /* Adjust margin for better spacing on mobile */
    }

    .production-subpanel h2 {
        font-size: 16px; /* Adjust font size for mobile */
    }

    .production-subpanel p {
        font-size: 14px; /* Adjust font size for mobile */
    }

    .productions-subpanels > .panel-title {
        width: 90%;
        margin: 0 5% 10px; /* слева/справа как у horizontal-container */
    }

    .panel-title {
    width: 100%;
    }
}